"use client"; import React, { useState, useMemo } from "react"; import { motion, AnimatePresence } from "framer-motion"; import { CreditCard, ShieldCheck, Info, Eye, EyeOff } from "lucide-react"; /** * PRO TIPS FOR USERS: * 1. Card Flip: The card automatically flips when the CVC field is focused. * 2. Issuer Detection: Supports dynamic logo switching for Visa and Mastercard. * 3. Bimodal: Glassmorphism effect optimized for both Light and Dark themes. */ export type CardAccentColor = "orange" | "indigo" | "emerald"; export interface DebitCardVisualizerProps { accent?: CardAccentColor; onComplete?: (data: any) => void; className?: string; } export const DebitCardVisualizer = ({ accent = "orange", className }: DebitCardVisualizerProps) => { const [formData, setFormData] = useState({ number: "", name: "", expiry: "", cvc: "" }); const [isFlipped, setIsFlipped] = useState(false); const [isNumberFocused, setIsNumberFocused] = useState(false); const themeMaps: Record = { orange: { bg: "bg-orange-500", text: "text-orange-500", ring: "ring-orange-500/20", gradient: "from-orange-500 to-amber-500" }, indigo: { bg: "bg-indigo-500", text: "text-indigo-500", ring: "ring-indigo-500/20", gradient: "from-indigo-500 to-blue-500" }, emerald: { bg: "bg-emerald-500", text: "text-emerald-500", ring: "ring-emerald-500/20", gradient: "from-emerald-500 to-teal-500" }, }; const current = themeMaps[accent]; // Helper for card brand const cardType = useMemo(() => { if (formData.number.startsWith("4")) return "visa"; if (formData.number.startsWith("5")) return "mastercard"; return "generic"; }, [formData.number]); const handleInputChange = (e: React.ChangeEvent) => { const { id, value } = e.target; let formattedValue = value; if (id === "number") { formattedValue = value.replace(/\s?/g, '').replace(/(\d{4})/g, '$1 ').trim().slice(0, 19); } else if (id === "expiry") { formattedValue = value.replace(/\//g, '').replace(/(\d{2})/g, '$1/').trim().slice(0, 5); if (formattedValue.endsWith('/')) formattedValue = formattedValue.slice(0, -1); } else if (id === "cvc") { formattedValue = value.replace(/\D/g, '').slice(0, 3); } setFormData({ ...formData, [id]: formattedValue }); }; return (

{/* 3D CARD VISUALIZER */}

{/* FRONT FACE */}

{/* CHIP */} {cardType === "visa" ? VISA : cardType === "mastercard" ?

: }

{formData.number || "•••• •••• •••• ••••"}

Card Holder

{formData.name || "YOUR NAME HERE"}

Expires

{formData.expiry || "MM/YY"}

{/* BACK FACE */}

{formData.cvc || "•••"}

This card is property of the issuing bank. Use of this card is subject to the terms and conditions provided by Uixtra Premium Registry.

{/* FORM INTERFACE */}

Payment Details

Complete your transaction securely.

{/* Card Number */}

Card Number

setIsNumberFocused(true)} onBlur={() => setIsNumberFocused(false)} className="w-full h-14 pl-12 pr-4 bg-transparent outline-none border-none text-sm font-bold text-neutral-900 dark:text-white placeholder:text-neutral-600" />

{/* Card Holder */}

Card Holder Name

Expiry

CVC / CVV setIsFlipped(true)} onBlur={() => setIsFlipped(false)} className="w-full h-14 px-4 bg-neutral-50 dark:bg-neutral-950 border border-neutral-200 dark:border-neutral-800 rounded-2xl outline-none focus:border-orange-500 transition-all text-sm font-bold text-neutral-900 dark:text-white text-center" />

); }; export default function DebitCardDemo() { return (

); }