import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
} from '@/components/ui/dialog';
import { Button } from '@/components/ui/button';
import { Phone, PhoneOff } from 'lucide-react';

interface IncomingCallModalProps {
  open: boolean;
  callerName: string;
  onAccept: () => void;
  onReject: () => void;
}

export function IncomingCallModal({
  open,
  callerName,
  onAccept,
  onReject,
}: IncomingCallModalProps) {
  return (
    <Dialog open={open} onOpenChange={(o) => !o && onReject()}>
      <DialogContent className="sm:max-w-md" onInteractOutside={onReject}>
        <DialogHeader>
          <DialogTitle>Appel entrant</DialogTitle>
        </DialogHeader>
        <div className="flex flex-col items-center gap-6 py-4">
          <p className="text-muted-foreground">
            {callerName} vous appelle
          </p>
          <div className="flex gap-4">
            <Button
              variant="default"
              size="lg"
              onClick={onAccept}
              className="rounded-full h-14 w-14 p-0 bg-success hover:bg-success/90"
              aria-label="Accepter"
            >
              <Phone className="h-6 w-6" />
            </Button>
            <Button
              variant="destructive"
              size="lg"
              onClick={onReject}
              className="rounded-full h-14 w-14 p-0"
              aria-label="Refuser"
            >
              <PhoneOff className="h-6 w-6" />
            </Button>
          </div>
        </div>
      </DialogContent>
    </Dialog>
  );
}