import { HealthResponse } from '../types'

interface Props {
  language: string
  speaker: string
  onLanguageChange: (lang: string) => void
  onSpeakerChange: (speaker: string) => void
  healthData: HealthResponse | null
  disabled?: boolean
}

export const ControlPanel = ({
  language,
  speaker,
  onLanguageChange,
  onSpeakerChange,
  healthData,
  disabled,
}: Props) => {
  const languages = healthData?.supported_languages ?? ["Gujarati"]
  const speakers = healthData?.supported_speakers?.[language] ?? []

  return (
    <div className="flex gap-4">
      <div className="flex flex-col gap-1 flex-1">
        <label className="text-sm font-medium text-gray-700">Language</label>
        <select
          value={language}
          onChange={e => onLanguageChange(e.target.value)}
          disabled={disabled}
          className="rounded-md border border-gray-300 px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 disabled:opacity-50"
        >
          {languages.map(l => (
            <option key={l} value={l}>{l}</option>
          ))}
        </select>
      </div>
      <div className="flex flex-col gap-1 flex-1">
        <label className="text-sm font-medium text-gray-700">Speaker</label>
        <select
          value={speaker}
          onChange={e => onSpeakerChange(e.target.value)}
          disabled={disabled}
          className="rounded-md border border-gray-300 px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 disabled:opacity-50"
        >
          {speakers.map(s => (
            <option key={s} value={s}>{s}</option>
          ))}
        </select>
      </div>
    </div>
  )
}