"use client"

import { Phone, PhoneOff } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { Card } from "@/components/ui/card"

interface User {
  id: string
  firstName: string
  lastName: string
  avatar?: string
}

interface IncomingCallProps {
  caller: User
  callType: "audio" | "video"
  onAccept: () => void
  onDecline: () => void
}

export function IncomingCall({ caller, callType, onAccept, onDecline }: IncomingCallProps) {
  return (
    <div className="fixed inset-0 bg-black/80 flex items-center justify-center z-50">
      <Card className="bg-card text-card-foreground max-w-sm w-full mx-4">
        <div className="p-6 text-center">
          <Avatar className="h-24 w-24 mx-auto mb-4">
            <AvatarImage src={caller.avatar || "/placeholder.svg"} alt={`${caller.firstName} ${caller.lastName}`} />
            <AvatarFallback className="text-2xl">
              {caller.firstName[0]}
              {caller.lastName[0]}
            </AvatarFallback>
          </Avatar>
          <h3 className="text-xl font-semibold mb-2">
            {caller.firstName} {caller.lastName}
          </h3>
          <p className="text-muted-foreground mb-6">Incoming {callType} call...</p>
          <div className="flex justify-center space-x-6">
            <Button variant="destructive" size="lg" className="rounded-full h-16 w-16" onClick={onDecline}>
              <PhoneOff className="h-6 w-6" />
            </Button>
            <Button
              variant="default"
              size="lg"
              className="rounded-full h-16 w-16 bg-green-500 hover:bg-green-600"
              onClick={onAccept}
            >
              <Phone className="h-6 w-6" />
            </Button>
          </div>
        </div>
      </Card>
    </div>
  )
}