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

export interface CategoryIconProps {
  category: string;
  size?: number;
}

export const CategoryIcon = ({ 
  category,
  size = 24
}: CategoryIconProps) => {
  // Map categories to icons if needed, for now just use Tag
  return (
    <Box 
      width={size} 
      height={size} 
      display="flex" 
      alignItems="center" 
      justifyContent="center" 
      bg="var(--ui-color-bg-surface-muted)"
      style={{ borderRadius: 'var(--ui-radius-sm)' }}
    >
      <Icon icon={Tag} size={size > 20 ? 4 : 3} intent="low" />
    </Box>
  );
};