Phone Verification Form

import React from "react";
import { PhoneVerificationForm } from "@/components/ui/phone-verification-form";

// Main demo component
export default function PhoneVerificationFormDemo() {
  // Handler functions to demonstrate prop connectivity
  const handleClose = () => {
    console.log("Close button clicked");
  };

  const handleProceed = (phoneNumber: string) => {
    console.log("Proceeding with phone number:", phoneNumber);
    // Add your logic here, e.g., send OTP
  };

  const handleGoogleSignIn = () => {
    console.log("Sign in with Google clicked");
  };

  const handleSignUp = () => {
    console.log("Sign-Up link clicked");
  };

  return (
    // Centering container to simulate a modal overlay
    <div className="flex min-h-[600px] w-full items-center justify-center bg-background p-4">
      <PhoneVerificationForm
        // Replace with your actual image source
        illustrationSrc="https://www.pvrcinemas.com/static/media/Cinema%20House%201.ddda5acf194e124b216b.gif"
        onClose={handleClose}
        onProceed={handleProceed}
        onGoogleSignIn={handleGoogleSignIn}
        onSignUpClick={handleSignUp}
      />
    </div>
  );
}