import * as Icons from "assets/icons";
import { useResolveColorToken } from "design-system/hooks/useResolveColorToken";
import { ColorThemeKeys } from "design-system/theme/types";
import { FunctionComponent } from "react";
import { SvgProps } from "react-native-svg";

export interface IconProps extends Omit<SvgProps, "color"> {
  name: keyof typeof Icons;
  color?: ColorThemeKeys;
}

export function Icon({ name, color, ...rest }: IconProps) {
  const resolveColor = useResolveColorToken();

  const IconComponent = Icons[name] as FunctionComponent<SvgProps>;
  return <IconComponent color={color ? resolveColor(color) : undefined} {...rest} />;
}