import React from 'react';
import {SvgProps} from 'react-native-svg';
import {COLORS} from '@shared/colors';

import {IconName, IconSize, IconSizeType} from './interfaces';
import {ICON_MAP} from './constants';

export interface IconProps extends Omit<SvgProps, 'color'> {
  name: IconName;
  size?: IconSizeType | number;
  color?: string;
}

/**
 * Icon component only for Material icons, which is the official icons for the Design System 2.0.
 * For Design System 3.0, use `@tabler/icons-react-native`. Example
 * ```jsx
 * import { IconArrowLeft } from '@tabler/icons-react-native';
 *
 * <IconArrowLeft color="red" size={48} />
 * ```
 * @deprecated Use `@tabler/icons-react-native` instead.
 */
function Icon({
  name,
  width,
  height,
  fill,
  stroke,
  size = 'md',
  color = COLORS.BLACK,
  ...props
}: IconProps) {
  const iconSize = size in IconSize ? IconSize[size as IconSizeType] : size;

  if (!(name in ICON_MAP)) {
    return null;
  }

  const IconAsset = ICON_MAP[name].default;

  const iconProps = {
    ...(fill || stroke ? {fill, stroke} : {fill: color}),
    width: width || iconSize,
    height: height || iconSize,
  };

  return <IconAsset {...iconProps} {...props} />;
}

export * from './interfaces';

export default Icon;