frontend/src/components/ExampleVariantSelector.tsx

import React from 'react';

interface ExampleVariantSelectorProps {
  variantKeys: string[];
  selectedVariant: string;
  setSelectedVariant: (v: string) => void;
}

const ExampleVariantSelector: React.FC<ExampleVariantSelectorProps> = ({ variantKeys, selectedVariant, setSelectedVariant }) => {
  // Keyboard shortcut for variant switching (keys 1-N)
  React.useEffect(() => {
    const handler = (e: KeyboardEvent) => {
      if (document.activeElement && (document.activeElement as HTMLElement).tagName === 'INPUT') return;
      const idx = parseInt(e.key, 10);
      if (!isNaN(idx) && idx > 0 && idx <= variantKeys.length) {
        setSelectedVariant(variantKeys[idx - 1]);
      }
    };
    window.addEventListener('keydown', handler);
    return () => window.removeEventListener('keydown', handler);
  }, [variantKeys, setSelectedVariant]);

  return (
    <fieldset className="fieldset w-full p-4 rounded border border-gray-700 bg-base-200 mb-4">
      <legend className="fieldset-legend font-semibold">Variants</legend>
      <div className="mb-2 flex gap-4 flex-wrap">
        {variantKeys.map((variant, idx) => (
          <label key={variant} className="flex items-center gap-1 cursor-pointer">
            <input
              type="radio"
              name={`variant-selector`}
              value={variant}
              checked={selectedVariant === variant}
              onChange={() => setSelectedVariant(variant)}
            />
            <span className="text-xs font-semibold">
              {variant} <span className="opacity-60">[{idx + 1}]</span>
            </span>
          </label>
        ))}
      </div>
    </fieldset>
  );
};

export default ExampleVariantSelector;