// src/components/VoiceControls.js
import React from "react";
import { FaMicrophone, FaRegStopCircle } from "react-icons/fa";

const Controls = ({
  status,
  isBusy,
  isRecording,
  isAutoMode,
  isAutoListening,
  onMicClick,
  onToggleAutoMode,
}) => {
  const micButtonColorClass = isRecording
    ? "bg-red-500 hover:bg-red-600 active:bg-red-700 shadow-red-500/20"
    : "bg-indigo-600 hover:bg-indigo-700 active:bg-indigo-800 shadow-indigo-500/20";

  const micButtonState =
    isAutoMode && isAutoListening ? isAutoListening : isRecording;

  return (
    <div className="bg-white dark:bg-gray-800 p-6 flex flex-col items-center gap-4">
      {/* Status indicator */}
      <div className="flex items-center gap-2">
        <div className={`w-2 h-2 rounded-full ${isRecording || isAutoListening ? 'bg-red-500 animate-pulse' : 'bg-gray-300 dark:bg-gray-600'}`}></div>
        <div className="text-center text-xs font-bold text-gray-400 dark:text-gray-500 uppercase tracking-widest">
          {status || (isBusy ? "Thinking..." : "Ready")}
        </div>
      </div>

      <div className="flex items-center space-x-8">
        {/* Mic Toggle Button */}
        <button
          onClick={onMicClick}
          disabled={isBusy}
          className={`p-5 rounded-full text-white transition-all duration-300 shadow-xl hover:scale-110 active:scale-95 disabled:grayscale disabled:opacity-50 ${micButtonColorClass}`}
        >
          {micButtonState ? (
            <FaRegStopCircle size={32} />
          ) : (
            <FaMicrophone size={32} />
          )}
        </button>

        {/* Auto Mode Toggle */}
        <label className="group flex items-center space-x-3 cursor-pointer">
          <div className="relative">
            <input
              type="checkbox"
              id="auto-mode-toggle"
              checked={isAutoMode}
              onChange={onToggleAutoMode}
              disabled={isBusy}
              className="sr-only peer"
            />
            <div className="w-10 h-6 bg-gray-200 peer-focus:outline-none dark:bg-gray-700 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-indigo-600"></div>
          </div>
          <span className="text-sm font-bold text-gray-500 dark:text-gray-400 uppercase tracking-widest group-hover:text-indigo-500 transition-colors">
            Auto Mode
          </span>
        </label>
      </div>
    </div>
  );
};

export default Controls;