"use client"

import { PhoneOff, Video, VideoOff, Mic, MicOff, Volume2, VolumeX, RotateCcw } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Card } from "@/components/ui/card"

interface CallControlsProps {
  isMuted: boolean
  isVideoEnabled: boolean
  isSpeakerEnabled: boolean
  callType: "audio" | "video"
  onToggleMute: () => void
  onToggleVideo: () => void
  onToggleSpeaker: () => void
  onSwitchCamera: () => void
  onEndCall: () => void
}

export function CallControls({
  isMuted,
  isVideoEnabled,
  isSpeakerEnabled,
  callType,
  onToggleMute,
  onToggleVideo,
  onToggleSpeaker,
  onSwitchCamera,
  onEndCall,
}: CallControlsProps) {
  return (
    <Card className="bg-black/50 border-white/20">
      <div className="p-4 flex items-center justify-center space-x-4">
        {/* Mute Button */}
        <Button
          variant={isMuted ? "destructive" : "secondary"}
          size="lg"
          className="rounded-full h-14 w-14"
          onClick={onToggleMute}
        >
          {isMuted ? <MicOff className="h-6 w-6" /> : <Mic className="h-6 w-6" />}
        </Button>

        {/* Video Toggle (only for video calls) */}
        {callType === "video" && (
          <Button
            variant={isVideoEnabled ? "secondary" : "destructive"}
            size="lg"
            className="rounded-full h-14 w-14"
            onClick={onToggleVideo}
          >
            {isVideoEnabled ? <Video className="h-6 w-6" /> : <VideoOff className="h-6 w-6" />}
          </Button>
        )}

        {/* Speaker Toggle */}
        <Button
          variant={isSpeakerEnabled ? "secondary" : "outline"}
          size="lg"
          className="rounded-full h-14 w-14"
          onClick={onToggleSpeaker}
        >
          {isSpeakerEnabled ? <Volume2 className="h-6 w-6" /> : <VolumeX className="h-6 w-6" />}
        </Button>

        {/* Camera Switch (only for video calls) */}
        {callType === "video" && (
          <Button variant="secondary" size="lg" className="rounded-full h-14 w-14" onClick={onSwitchCamera}>
            <RotateCcw className="h-6 w-6" />
          </Button>
        )}

        {/* End Call */}
        <Button variant="destructive" size="lg" className="rounded-full h-14 w-14" onClick={onEndCall}>
          <PhoneOff className="h-6 w-6" />
        </Button>
      </div>
    </Card>
  )
}