import useTextToSpeech from '../hooks/useTextToSpeech';

function AudioControls({ message, character }) {
  const {
    isSpeaking,
    isSupported,
    speak,
    stop,
    rate,
    setRate,
    volume,
    setVolume
  } = useTextToSpeech();

  if (!isSupported) {
    return null;
  }

  const handlePlay = () => {
    if (isSpeaking) {
      stop();
    } else {
      speak(message, {
        rate: rate,
        volume: volume
      });
    }
  };

  return (
    <div className="audio-controls">
      <button
        className={`play-btn ${isSpeaking ? 'speaking' : ''}`}
        onClick={handlePlay}
        title={isSpeaking ? 'Stop' : 'Read aloud'}
      >
        {isSpeaking ? '⏹️' : '🔊'}
      </button>
      
      <div className="audio-settings">
        <label className="speed-control" title="Speech speed">
          <span>🐢</span>
          <input
            type="range"
            min="0.5"
            max="2"
            step="0.25"
            value={rate}
            onChange={(e) => setRate(parseFloat(e.target.value))}
          />
          <span>🐇</span>
        </label>
        
        <label className="volume-control" title="Volume">
          <span>🔈</span>
          <input
            type="range"
            min="0"
            max="1"
            step="0.1"
            value={volume}
            onChange={(e) => setVolume(parseFloat(e.target.value))}
          />
          <span>🔊</span>
        </label>
      </div>
    </div>
  );
}

export default AudioControls;
