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

const SIZES: JewelrySize[] = [
  { label: 'S', circumferenceCm: 16 },
  { label: 'M', circumferenceCm: 18 },
  { label: 'L', circumferenceCm: 20 },
];

function SizeSelector() {
  const size = useDesignStore((s) => s.size);
  const setSize = useDesignStore((s) => s.setSize);

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

export default SizeSelector;
