import React from 'react';
import { LucideIcon } from 'lucide-react';
import { Box, BoxProps } from './Box';

interface IconProps extends Omit<BoxProps<'svg'>, 'children' | 'as'> {
  icon: LucideIcon;
  size?: number | string;
  color?: string;
}

export function Icon({ icon: LucideIcon, size = 4, color, className = '', style, ...props }: IconProps) {
  const sizeMap: Record<string | number, string> = {
    3: 'w-3 h-3',
    3.5: 'w-3.5 h-3.5',
    4: 'w-4 h-4',
    5: 'w-5 h-5',
    6: 'w-6 h-6',
    7: 'w-7 h-7',
    8: 'w-8 h-8',
    10: 'w-10 h-10',
    12: 'w-12 h-12',
    16: 'w-16 h-16',
    'full': 'w-full h-full'
  };

  const sizeClass = sizeMap[size] || 'w-4 h-4';
  
  const combinedStyle = color ? { color, ...style } : style;

  return (
    <Box
      as={LucideIcon}
      className={`${sizeClass} ${className}`}
      style={combinedStyle}
      {...props}
    />
  );
}