import { useDesignStore } from '../store/designStore';
import type { JewelryType } from '../types';

const TYPES: { value: JewelryType; label: string }[] = [
  { value: 'bileklik', label: 'Bileklik' },
  { value: 'kolye', label: 'Kolye' },
  { value: 'tesbih', label: 'Tesbih' },
];

function TypeSelector() {
  const jewelryType = useDesignStore((s) => s.jewelryType);
  const setJewelryType = useDesignStore((s) => s.setJewelryType);

  return (
    <div className="flex gap-2">
      {TYPES.map((t) => (
        <button
          key={t.value}
          onClick={() => setJewelryType(t.value)}
          className={`flex-1 py-2 px-3 rounded-lg text-sm font-medium transition-colors ${
            jewelryType === t.value
              ? 'bg-purple-500 text-white'
              : 'bg-white/10 text-white/70 hover:bg-white/20'
          }`}
        >
          {t.label}
        </button>
      ))}
    </div>
  );
}

export default TypeSelector;
