import React from 'react'
import { Label } from '@/components/ui/label'
import { Input } from '@/components/ui/input'
import { useTextToSpeech } from '../../contexts/TextToSpeechContext'

interface TextToSpeechConfigProps {
  className?: string
}

const TextToSpeechConfig: React.FC<TextToSpeechConfigProps> = ({
  className = ''
}) => {
  const { config, setConfig } = useTextToSpeech()

  return (
    <div className={`space-y-4 ${className}`}>
      <div className="space-y-2">
        <Label htmlFor="speakerEmbeddings" className="text-sm font-medium">
          Speaker Embeddings URL
        </Label>
        <Input
          id="speakerEmbeddings"
          type="url"
          value={config.speakerEmbeddings}
          onChange={(e) =>
            setConfig((prev) => ({
              ...prev,
              speakerEmbeddings: e.target.value
            }))
          }
          placeholder="https://huggingface.co/datasets/Xenova/transformers.js-docs/resolve/main/speaker_embeddings.bin"
          className="text-sm"
        />
        <p className="text-xs text-gray-500">
          URL to speaker embeddings file for voice characteristics
        </p>
      </div>
    </div>
  )
}

export default TextToSpeechConfig