Payment Card

1"use client";
2 
3import { useEffect, useState } from "react";
4import { cn } from "@/lib/utils";
5import {
6  Card,
7  CardContent,
8  CardDescription,
9  CardHeader,
10  CardTitle,
11} from "@/components/ui/card";
12import { Input } from "@/components/ui/input";
13import { Label } from "@/components/ui/label";
14import { Button } from "@/components/ui/button";
15import { ArrowRight, Check } from "lucide-react";
16import { AnimatePresence, motion } from "motion/react";
17 
18export interface finalTextProps {
19  text: string;
20}
21 
22export interface PaymentCardProps {
23  title: string;
24  description: string;
25  price: string;
26  feature?: string;
27  featuredescription?: string;
28  feature2?: string;
29  feature2description?: string;
30  finalText?: finalTextProps[];
31  onPay?: (data: {
32    cardNumber: string;
33    expiry: string;
34    cvc: string;
35  }) => Promise<void> | void;
36  className?: string;
37}
38 
39export function PaymentCard({
40  title,
41  description,
42  price,
43  feature,
44  featuredescription,
45  feature2,
46  feature2description,
47  finalText = [],
48  onPay,
49  className,
50}: PaymentCardProps) {
51  const [cardNumber, setCardNumber] = useState("");
52  const [expiry, setExpiry] = useState("");
53  const [cvc, setCvc] = useState("");
54  const [index, setIndex] = useState(0);
55  const [errors, setErrors] = useState<{
56    card?: string;
57    expiry?: string;
58    cvc?: string;
59  }>({});
60 
61  const validate = () => {
62    const newErrors: typeof errors = {};
63 
64    // Card number validation
65    if (!/^[0-9 ]{16,19}$/.test(cardNumber)) {
66      newErrors.card = "Card number must be 16 digits and only numbers.";
67    }
68 
69    // Expiry validation
70    if (!/^(0[1-9]|1[0-2])\/\d{2}$/.test(expiry)) {
71      newErrors.expiry = "Enter a valid expiry date (MM/YY).";
72    } else {
73      const [month, year] = expiry.split("/").map(Number);
74      const now = new Date();
75      const firstInvalidDay = new Date(2000 + year, month, 1);
76      if (firstInvalidDay <= now) {
77        newErrors.expiry = "Card has expired.";
78      }
79    }
80 
81    // CVC validation
82    if (!/^[0-9]{3,4}$/.test(cvc)) {
83      newErrors.cvc = "CVC must be 3 or 4 digits.";
84    }
85 
86    setErrors(newErrors);
87    return Object.keys(newErrors).length === 0;
88  };
89 
90  const handlePay = () => {
91    if (validate()) {
92      if (onPay) {
93        onPay({ cardNumber, expiry, cvc });
94        console.log("Payment processed!");
95      } else {
96        console.log("error");
97      }
98    }
99  };
100 
101  // Final text animation
102  useEffect(() => {
103    if (!finalText || finalText.length === 0) return;
104 
105// … truncated