import * as Icons from '@ant-design/icons';
import { FC, ComponentType, memo, CSSProperties } from '@/imports';

export type IconName = keyof typeof Icons;

export interface IconProps {
  name: IconName;
  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | number;
  color?: string;
  style?: CSSProperties;
  className?: string;
  onClick?: () => void;
  rotate?: number;
  spin?: boolean;
}

const sizeMap: Record<string, number> = {
  xs: 12,
  sm: 14,
  md: 16,
  lg: 20,
  xl: 24,
  '2xl': 32,
};

const Icon: FC<IconProps> = ({
  name,
  size = 'md',
  color,
  style,
  className,
  onClick,
  rotate,
  spin,
}) => {
  const IconComponent = Icons[name] as ComponentType<{
    style?: CSSProperties;
    className?: string;
    onClick?: () => void;
    rotate?: number;
    spin?: boolean;
  }>;

  if (!IconComponent) {
    console.warn(`Icon "${name}" not found in @ant-design/icons`);
    return null;
  }

  const iconSize = typeof size === 'number' ? size : sizeMap[size] || 16;

  const iconStyle: CSSProperties = {
    fontSize: iconSize,
    color: color,
    cursor: onClick ? 'pointer' : undefined,
    ...style,
  };

  return (
    <IconComponent
      style={iconStyle}
      className={className}
      onClick={onClick}
      rotate={rotate}
      spin={spin}
    />
  );
};

export default memo(Icon);

export const createIcon = (name: IconName) => {
  return memo((props: Omit<IconProps, 'name'>) => (
    <Icon name={name} {...props} />
  ));
};

export const IconList = Object.keys(Icons) as IconName[];
