"use client" import * as React from "react" import { motion } from "framer-motion" import { Eye, EyeOff } from "lucide-react" import { cn } from "@/lib/utils" const PERSPECTIVE = 400 const CARD_ANIMATION_DURATION = 0.5 const INITIAL_DELAY = 0.2 const springTransition = { type: "spring", stiffness: 100, damping: 30, } const fadeInVariants = { hidden: { opacity: 0, y: 20 }, visible: { opacity: 1, y: 0 }, } interface CreditCardProps extends React.HTMLAttributes { cardNumber: string cardHolder: string expiryDate: string variant?: "default" | "dark" } const CreditCard = React.forwardRef( ({ className, cardNumber, cardHolder, expiryDate, variant = "default", ...props }, ref) => { const [isVisible, setIsVisible] = React.useState(false) const getMaskedNumber = (number: string) => { const lastFour = number.slice(-4) return `**** **** **** ${lastFour}` } const variants = { default: "bg-lime-300 text-blue-900", dark: "bg-slate-800 text-white", } return (

VISA setIsVisible(!isVisible)} aria-label={isVisible ? "Hide card details" : "Show card details"} > {isVisible ? : }

{isVisible ? cardNumber : getMaskedNumber(cardNumber)}

Card Holder

{cardHolder}

Expires

{isVisible ? expiryDate : "**/**"}

) } ) CreditCard.displayName = "CreditCard" export { CreditCard }