// src/components/Controls.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-600 hover:bg-red-700 active:bg-red-800"
    : "bg-indigo-600 hover:bg-indigo-700 active:bg-indigo-800";

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

  return (
    <div className="bg-white dark:bg-gray-800 p-4 border-t border-gray-200 dark:border-gray-700 flex flex-col items-center gap-4">
      <div className="text-center text-sm text-gray-500 dark:text-gray-400 font-medium">
        {status}
      </div>
      <div className="flex items-center space-x-4">
        <button
          onClick={onMicClick}
          disabled={isBusy}
          className={`p-4 rounded-full text-white transition-colors duration-200 ease-in-out transform hover:scale-105 active:scale-95 ${micButtonColorClass} disabled:bg-gray-400`}
        >
          {micButtonState ? (
            <FaRegStopCircle size={28} />
          ) : (
            <FaMicrophone size={28} />
          )}
        </button>

        <div className="flex items-center space-x-2">
        <label className="inline-flex items-center space-x-2 cursor-pointer">
          <input
            type="checkbox"
            id="auto-mode-toggle"
            checked={isAutoMode}
            onChange={onToggleAutoMode}
            disabled={isBusy}
            className="h-5 w-5 text-indigo-600 transition duration-200 rounded border-gray-300 focus:ring-2 focus:ring-indigo-500 focus:outline-none"
          />
            <span className="text-sm font-medium text-gray-700 dark:text-gray-300">Auto Mode</span>
            </label>
        </div>
      </div>
    </div>
  );
};

export default Controls;