import type { ProductAttribute } from '@/types/api';
import { ATTRIBUTE_LABELS } from '@/lib/product-attributes';

interface Props {
  attributes: ProductAttribute[] | undefined;
  className?: string;
}

export default function ProductAttributes({ attributes, className }: Props) {
  if (!attributes || attributes.length === 0) return null;

  return (
    <div className={`flex flex-wrap gap-2 ${className ?? ''}`}>
      {attributes.map((attr) => (
        <span
          key={attr}
          className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-emerald-100 text-emerald-800"
          title={ATTRIBUTE_LABELS[attr]}
        >
          {ATTRIBUTE_LABELS[attr]}
        </span>
      ))}
    </div>
  );
}
