import React from 'react';
import { Box } from './primitives/Box';
import { Image } from './Image';
import { Tag } from 'lucide-react';
import { Icon } from './Icon';

export interface CategoryIconProps {
  categoryId?: string;
  src?: string;
  alt: string;
  size?: number;
  className?: string;
}

export function CategoryIcon({ 
  categoryId, 
  src, 
  alt, 
  size = 24, 
  className = '',
}: CategoryIconProps) {
  const iconSrc = src || (categoryId ? `/media/categories/${categoryId}/icon` : undefined);

  return (
    <Box
      display="flex"
      alignItems="center"
      justifyContent="center"
      className={className}
      style={{ width: size, height: size, flexShrink: 0 }}
    >
      {iconSrc ? (
        <Image
          src={iconSrc}
          alt={alt}
          className="w-full h-full object-contain"
          fallbackSrc="/default-category-icon.png"
        />
      ) : (
        <Icon icon={Tag} size={size > 20 ? 4 : 3} color="text-gray-500" />
      )}
    </Box>
  );
}