import React from 'react';
import { VoiceName } from '../types';
import { AVAILABLE_VOICES } from '../constants';
import { Mic } from 'lucide-react';

interface VoiceSelectorProps {
  selectedVoice: VoiceName;
  onVoiceChange: (voice: VoiceName) => void;
  disabled?: boolean;
}

export const VoiceSelector: React.FC<VoiceSelectorProps> = ({ selectedVoice, onVoiceChange, disabled }) => {
  return (
    <div className="flex items-center space-x-2">
      <Mic className="w-4 h-4 text-slate-500" />
      <select
        value={selectedVoice}
        onChange={(e) => onVoiceChange(e.target.value as VoiceName)}
        disabled={disabled}
        className="bg-white border border-slate-300 text-slate-700 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 disabled:opacity-50 disabled:cursor-not-allowed"
      >
        {AVAILABLE_VOICES.map((v) => (
          <option key={v.name} value={v.name}>
            {v.label}
          </option>
        ))}
      </select>
    </div>
  );
};