"use client" import { useState } from "react" import { motion, AnimatePresence } from "framer-motion" import { CreditCard, Plus, Trash2, Star, Wallet, Building2 } from "lucide-react" import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Badge } from "@/components/ui/badge" import { Separator } from "@/components/ui/separator" import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs" import { DotPattern } from "@/components/backgrounds/dot-pattern" import { stagger, staggerItem, cardHover, cardHoverTarget } from "@/lib/animations" const initialCards = [ { id: 1, brand: "Visa", last4: "4242", holder: "Alex Lee", exp: "08/27", default: true }, { id: 2, brand: "Mastercard", last4: "8888", holder: "Alex Lee", exp: "03/28", default: false }, { id: 3, brand: "Amex", last4: "0005", holder: "Alex Lee", exp: "11/26", default: false }, ] const wallets = [ { id: 1, name: "PayPal", email: "alex@example.com", default: true }, { id: 2, name: "Apple Pay", device: "iPhone 15 Pro", default: false }, ] export default function PaymentMethods() { const [cards, setCards] = useState(initialCards) const [paymentWallets, setPaymentWallets] = useState(wallets) const setDefaultCard = (id: number) => { setCards((prev) => prev.map((c) => ({ ...c, default: c.id === id }))) } const removeCard = (id: number) => { setCards((prev) => prev.filter((c) => c.id !== id)) } return (

Payment Methods

Manage your saved payment methods.

Cards Digital Wallets {cards.map((card) => (

{card.brand} ending in {card.last4}

{card.default && Default}

Expires {card.exp} · {card.holder}

{!card.default && ( )}

))} {paymentWallets.map((w) => (

{w.name}

{w.email || w.device}

{w.default && Default} ))}

) }