interface ProductBadgeProps {
  colors?: { name: string; hex: string }[];
  selected?: string;
  onSelect: (color: string) => void;
}

export default function ProductBadge({ colors, selected, onSelect }: ProductBadgeProps) {
  if (!colors?.length) return null;

  return (
    <div className="space-y-3">
      <div className="flex justify-between items-center">
        <label className="block text-sm font-medium">สี</label>
        {selected && <span className="text-sm text-gray-500">{selected}</span>}
      </div>
      <div className="flex flex-wrap gap-2">
        {colors.map(color => (
          <button
            key={color.name}
            onClick={() => onSelect(color.name)}
            className={`w-10 h-10 rounded-full border-2 transition-all ${
              selected === color.name
                ? 'border-blue-600 scale-110'
                : 'border-gray-200 hover:border-gray-300'
            }`}
            style={{ backgroundColor: color.hex }}
            title={color.name}
          >
            {selected === color.name && (
              <span className="sr-only">{color.name}</span>
            )}
          </button>
        ))}
      </div>
    </div>
  );
}
