interface SizeOption {
  name: string;
  available: boolean;
}

interface ProductSizesProps {
  sizes: SizeOption[];
  selected?: string;
  onSelect: (size: string) => void;
}

export default function ProductSizes({ sizes, selected, onSelect }: ProductSizesProps) {
  return (
    <div className="space-y-3">
      <label className="block text-sm font-medium">ไซส์</label>
      <div className="flex flex-wrap gap-2">
        {sizes.map(size => (
          <button
            key={size.name}
            onClick={() => size.available && onSelect(size.name)}
            disabled={!size.available}
            className={`px-4 py-2 border rounded-lg transition-colors ${
              selected === size.name
                ? 'border-blue-600 bg-blue-50 text-blue-600'
                : size.available
                ? 'border-gray-200 hover:border-gray-300'
                : 'border-gray-200 text-gray-300 cursor-not-allowed line-through'
            }`}
          >
            {size.name}
          </button>
        ))}
      </div>
    </div>
  );
}
