Card

'use client';

import { useState } from 'react';
import { IncomingCall } from '@/components/ui/card-16'; // Adjust path as needed
import { Button } from '@/components/ui/button';

export default function IncomingCallDemo() {
  const [isReceivingCall, setIsReceivingCall] = useState(false);

  // Handlers to control the component's state
  const handleAccept = () => {
    console.log('Call accepted');
    setIsReceivingCall(false);
  };

  const handleDecline = () => {
    console.log('Call declined');
    setIsReceivingCall(false);
  };

  const handleClose = () => {
    console.log('Notification closed');
    setIsReceivingCall(false);
  };

  return (
    <div className="flex h-[400px] w-full items-center justify-center rounded-md border">
      <Button
        onClick={() => setIsReceivingCall(true)}
        disabled={isReceivingCall}
      >
        Simulate Incoming Call
      </Button>

      <IncomingCall
        isOpen={isReceivingCall}
        callerName="Derry Mustofa"
        callerInfo="Driver"
        statusText="is calling you..."
        avatarUrl="https://i.pravatar.cc/150?u=derrymustofa"
        onAccept={handleAccept}
        onDecline={handleDecline}
        onClose={handleClose}
      />
    </div>
  );
}