Calling Card

"use client"

import { useCall } from '@/lib/utils'
import CallingCard from '@/components/ui/calling-card'

export default function CallPage() {
  // Business logic handled here
  const { state, actions } = useCall({
    callerName: "Sarah Johnson",
    callerNumber: "+1 (555) 123-4567",
    callerImage: "https://i.pravatar.cc/300?img=1",
    isIncoming: true,
    enableVideo: true,
    enableAudio: true,
    onAnswer: () => {
      console.log('Call answered!')
      // Add your business logic here
      // e.g., notify backend, update UI state, etc.
    },
    onDecline: () => {
      console.log('Call declined!')
      // Add your business logic here
    },
    onEnd: () => {
      console.log('Call ended!')
      // Add your business logic here
    }
  })

  // Example of conditional rendering based on call state
  if (state.callStatus === 'idle') {
    return (
      <div className="min-h-screen w-full flex items-center justify-center bg-gray-900">
        <div className="text-center text-white">
          <h1 className="text-2xl mb-4">No active call</h1>
          <button 
            onClick={() => window.location.reload()} 
            className="px-6 py-2 bg-blue-600 rounded-lg hover:bg-blue-700"
          >
            Simulate Incoming Call
          </button>
        </div>
      </div>
    )
  }

  // Pass all props to the reusable component
  return (
    <div className="w-full">
    <CallingCard
      callerName="Sarah Johnson"
      callerNumber="+1 (555) 123-4567"
      callerImage="https://i.pravatar.cc/300?img=1"
      state={state}
      actions={actions}
      ringtoneUrl="data:audio/wav;base64,UklGRnoGAABXQVZFZm10IBAAAAABAAEAQB8AAEAfAAABAAgAZGF0YQoGAACBhYqFbF1fdJivrJBhNjVgodDbq2EcBj+a2/LDciUFLIHO8tiJNwgZaLvt559NEAxQp+PwtmMcBjiR1/LMeSwFJHfH8N2QQAoUXrTp66hVFApGn+DyvmwhBTGH0fPTgjMGHm7A7+OZURE"
    />
    </div>
  )
}