import { useState } from 'react'
import { FaMicrophone, FaStop } from 'react-icons/fa'

const VoiceControl = ({ language, onCommand }) => {
  const [isListening, setIsListening] = useState(false)

  const toggleListening = () => {
    setIsListening(!isListening)
    // Here you would integrate with Web Speech API
    if (!isListening && onCommand) {
      onCommand(language === 'fa' 
        ? 'دستور صوتی دریافت شد: ساخت یک پروژه React جدید' 
        : 'Voice command received: Create a new React project')
    }
  }

  return (
    <div className="flex items-center justify-center p-4">
      <button
        onClick={toggleListening}
        className={`flex items-center justify-center w-16 h-16 rounded-full text-white text-2xl ${isListening ? 'bg-red-500 animate-pulse' : 'bg-blue-600'}`}
      >
        {isListening ? <FaStop /> : <FaMicrophone />}
      </button>
      <div className="mr-4">
        <p className="font-bold">
          {language === 'fa' ? 'کنترل صوتی' : 'Voice Control'}
        </p>
        <p className="text-sm text-gray-600">
          {isListening 
            ? (language === 'fa' ? 'در حال گوش دادن...' : 'Listening...') 
            : (language === 'fa' ? 'برای صحبت کلیک کنید' : 'Click to speak')}
        </p>
      </div>
    </div>
  )
}

export default VoiceControl