import { createElement } from 'react';
import type { ForgeTabIcon } from '@cdx-ui/icons/tab-icons';
import type { ForgeTabBarIcon } from './types';

/**
 * forgeTabIcon — web/JS-navigator implementation.
 *
 * Maps a {@link ForgeTabIcon} descriptor to a React Navigation `tabBarIcon`
 * value that renders the same Forge UI icon on every platform:
 *
 * - **Web** (`createBottomTabNavigator`): renders the SVG icon component with
 *   `filled={focused}` and the navigator-supplied `color`/`size` — pair with
 *   `useForgeBottomTabScreenOptions` so tints come from design tokens.
 * - **iOS/Android** (`createNativeBottomTabNavigator`): the `.native` module
 *   of this file returns a tinted template-image descriptor instead.
 *
 * ```tsx
 * import { useForgeBottomTabScreenOptions, forgeTabIcon } from '@cdx-ui/components';
 * import { HomeTabIcon } from '@cdx-ui/icons/tab-icons';
 *
 * <Tab.Screen
 *   name="Home"
 *   component={HomeScreen}
 *   options={{ title: 'Home', tabBarIcon: forgeTabIcon(HomeTabIcon) }}
 * />
 * ```
 */
export function forgeTabIcon(icon: ForgeTabIcon): ForgeTabBarIcon {
  const render = ({ focused, color, size }: { focused: boolean; color: string; size: number }) =>
    createElement(icon.Component, { filled: focused, color, size });

  return render as ForgeTabBarIcon;
}