import React from 'react';
import { Mic, MicOff, MessageSquare } from 'lucide-react';
import { Button } from '../ui/button';

interface VoiceControlsProps {
  isMuted: boolean;
  onToggleMute: () => void;
  showTranscript: boolean;
  onToggleTranscript: () => void;
}

const VoiceControls: React.FC<VoiceControlsProps> = ({
  isMuted,
  onToggleMute,
  showTranscript,
  onToggleTranscript
}) => (
  <div className="p-8 flex justify-center gap-6 relative z-10 bg-black/20 backdrop-blur-md">
    <Button
      variant={isMuted ? "destructive" : "secondary"}
      size="icon"
      className={`h-16 w-16 rounded-full ${!isMuted && 'bg-white/10 text-white hover:bg-white/20'}`}
      onClick={onToggleMute}
    >
      {isMuted ? <MicOff className="!w-6 !h-6" /> : <Mic className="!w-6 !h-6" />}
    </Button>
    <Button
      variant="secondary"
      size="icon"
      className={`h-16 w-16 rounded-full ${showTranscript ? 'bg-teal-600 text-white hover:bg-teal-700' : 'bg-white/10 text-white hover:bg-white/20'}`}
      onClick={onToggleTranscript}
    >
      <MessageSquare className="!w-6 !h-6" />
    </Button>
  </div>
);

export default React.memo(VoiceControls);