frontend/src/components/ExampleVariantSelector.tsx

import React from 'react'
import { VARIANT_NAME_MAP } from './galleryUtils'

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 ">
      <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"
            data-tooltip-id="variant-selector-tooltip"
          >
            <input
              type="radio"
              name={`variant-selector`}
              value={variant}
              checked={selectedVariant === variant}
              onChange={() => setSelectedVariant(variant)}
            />
            <span className="text-xs font-semibold">
              {VARIANT_NAME_MAP[variant] || variant} <span className="opacity-60">[{idx + 1}]</span>
            </span>
          </label>
        ))}
      </div>
    </fieldset>
  )
}

export default ExampleVariantSelector