OTP Verification

"use client";

import { useState } from "react";
import { OtpVerificationDialog } from "@/components/ui/otp-verification";
import { Button } from "@/components/ui/button";

export default function OtpDemo() {
  const [isDialogOpen, setIsDialogOpen] = useState(false);
  const [isLoading, setIsLoading] = useState(false);
  const [verificationResult, setVerificationResult] = useState("");

  // Handler for when the OTP is completely filled
  const handleOtpComplete = (otp: string) => {
    console.log("Submitted OTP:", otp);
    setVerificationResult("");
    setIsLoading(true);

    // Simulate an API call
    setTimeout(() => {
      setIsLoading(false);
      if (otp === "123456") { // Mock success case
        setVerificationResult("Success! OTP Verified.");
        setIsDialogOpen(false);
      } else { // Mock failure case
        setVerificationResult("Failed! Incorrect OTP.");
      }
    }, 2000);
  };

  return (
    <div className="flex flex-col items-center justify-center min-h-screen bg-background">
      <Button onClick={() => setIsDialogOpen(true)}>
        Open OTP Verification
      </Button>

      {verificationResult && (
        <p className="mt-4 text-center font-medium text-foreground">
          {verificationResult}
        </p>
      )}

      <OtpVerificationDialog
        isOpen={isDialogOpen}
        onOpenChange={setIsDialogOpen}
        imageUrl="https://www.pvrcinemas.com/static/media/Cinema%20House%201.ddda5acf194e124b216b.gif" // Placeholder image link
        phoneNumber="+91 9935*****6"
        isLoading={isLoading}
        onComplete={handleOtpComplete}
        countdownSeconds={45} // You can customize the countdown
      />
    </div>
  );
}