import React from 'react';
import { TextProps } from 'react-native';
import MCIcon from 'react-native-vector-icons/MaterialCommunityIcons';

import { useResolvedColor } from '../../../hooks/useResolvedColor';
import { useTheme } from '../../../hooks/useTheme';
import { ColorsWithHue } from '../../../theme/primitives/colors';
import { FontSizes } from '../../../theme/primitives/typography';

export interface IconProps extends TextProps {
  /**
   * Using MaterialDesignIcons v5.3.45
   * @link https://materialdesignicons.com/
   */
  name: string;
  size?: keyof FontSizes;
  color?: ColorsWithHue;
}

export const Icon = ({ color, size = 'xl', ...rest }: IconProps) => {
  const resolvedColor = useResolvedColor(color);
  const { fontSizes } = useTheme();

  return <MCIcon color={resolvedColor} size={fontSizes[size]} {...rest} />;
};