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

const STONE_SIZES: { value: StoneSizeMm; label: string }[] = [
  { value: 8, label: '8mm' },
  { value: 6, label: '6mm' },
];

function StoneSizeSelector() {
  const stoneSizeMm = useDesignStore((s) => s.stoneSizeMm);
  const setStoneSizeMm = useDesignStore((s) => s.setStoneSizeMm);

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

export default StoneSizeSelector;
