/**
 * CategoryIcon
 *
 * Pure UI component for displaying category icons.
 * Renders an image with fallback on error.
 */

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

export function CategoryIcon({ categoryId, alt, className = '' }: CategoryIconProps) {
  return (
    // eslint-disable-next-line @next/next/no-img-element
    <img
      src={`/media/categories/${categoryId}/icon`}
      alt={alt}
      className={`w-6 h-6 object-contain ${className}`}
      onError={(e) => {
        // Fallback to default icon
        (e.target as HTMLImageElement).src = '/default-category-icon.png';
      }}
    />
  );
}