import { Mic, MicOff, Volume2, VolumeX } from 'lucide-react';
import { Switch } from '@/components/ui/switch';
import { Button } from '@/components/ui/button';
import { Slider } from '@/components/ui/slider';
import { useState } from 'react';
import { cn } from '@/lib/utils';

interface VoiceControlsProps {
  voiceMode: boolean;
  setVoiceMode: (value: boolean) => void;
  isSpeaking: boolean;
  volume: number;
  setVolume: (value: number) => void;
}

const VoiceControls = ({
  voiceMode,
  setVoiceMode,
  isSpeaking,
  volume,
  setVolume
}: VoiceControlsProps) => {
  const [showVolumeControl, setShowVolumeControl] = useState(false);
  
  const toggleVolumeControl = () => {
    setShowVolumeControl(!showVolumeControl);
  };
  
  const handleVolumeChange = (value: number[]) => {
    setVolume(value[0]);
  };
  
  return (
    <div className="flex items-center space-x-2">
      <div className="flex items-center">
        <Switch
          checked={voiceMode}
          onCheckedChange={setVoiceMode}
          id="voice-mode"
        />
        <label
          htmlFor="voice-mode"
          className="text-sm font-medium ml-2 cursor-pointer"
        >
          {voiceMode ? (
            <span className="flex items-center text-primary">
              <Mic className="h-4 w-4 mr-1" />
              Voice on
            </span>
          ) : (
            <span className="flex items-center text-slate-600">
              <MicOff className="h-4 w-4 mr-1" />
              Voice off
            </span>
          )}
        </label>
      </div>
      
      {voiceMode && (
        <div className="relative">
          <Button
            variant="ghost"
            size="sm"
            onClick={toggleVolumeControl}
            className={cn(
              "h-8 w-8 p-0 rounded-full",
              isSpeaking && "text-primary animate-pulse"
            )}
          >
            {volume === 0 ? (
              <VolumeX className="h-4 w-4" />
            ) : (
              <Volume2 className="h-4 w-4" />
            )}
          </Button>
          
          {showVolumeControl && (
            <div className="absolute bottom-full mb-2 bg-white shadow-lg rounded-lg p-3 w-32">
              <Slider
                defaultValue={[volume]}
                max={1}
                step={0.1}
                onValueChange={handleVolumeChange}
              />
            </div>
          )}
        </div>
      )}
    </div>
  );
};

export default VoiceControls;