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;
  strokeWidth?: number;
}

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';
  
  // If color starts with 'text-', it's a tailwind class, so pass it as color prop to Box
  const isTailwindColor = typeof color === 'string' && color.startsWith('text-');
  const combinedStyle = color && !isTailwindColor ? { color, ...style } : style;
  const boxColor = isTailwindColor ? color : undefined;

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