"use client" import { useState } from "react" import { motion } from "framer-motion" import { fadeIn, stagger, staggerItem, buttonTap } from "@/lib/animations" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Badge } from "@/components/ui/badge" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow, } from "@/components/ui/table" import { Link, Copy, Plus, CheckCircle2, Share2, ExternalLink, QrCode } from "lucide-react" type LinkStatus = "active" | "expired" | "disabled" interface PaymentLink { id: string name: string amount: string status: LinkStatus created: string used: number url: string } const linkHistory: PaymentLink[] = [ { id: "1", name: "Invoice INV-001", amount: "MK 51,000", status: "active", created: "Jun 10, 2026", used: 0, url: "https://pay.example.com/link/abc123" }, { id: "2", name: "Consulting Fee", amount: "MK 255,000", status: "active", created: "Jun 08, 2026", used: 1, url: "https://pay.example.com/link/def456" }, { id: "3", name: "Design Project", amount: "MK 850,000", status: "expired", created: "May 20, 2026", used: 0, url: "https://pay.example.com/link/ghi789" }, { id: "4", name: "Monthly Retainer", amount: "MK 3,400,000", status: "disabled", created: "May 01, 2026", used: 3, url: "https://pay.example.com/link/jkl012" }, ] const statusConfig: Record = { active: { variant: "secondary", label: "Active" }, expired: { variant: "outline", label: "Expired" }, disabled: { variant: "destructive", label: "Disabled" }, } export default function PaymentLinks() { const [linkName, setLinkName] = useState("") const [linkAmount, setLinkAmount] = useState("") const [linkCurrency, setLinkCurrency] = useState("MWK") const [created, setCreated] = useState(false) const [copied, setCopied] = useState(false) const [newUrl, setNewUrl] = useState("") const handleCreate = () => { if (!linkName || !linkAmount) return const url = `https://pay.example.com/link/${Math.random().toString(36).substring(2, 8)}` setNewUrl(url) setCreated(true) } const handleCopy = (url: string) => { navigator.clipboard.writeText(url) setCopied(true) setTimeout(() => setCopied(false), 2000) } return (

Payment Links

Create and share payment links

Create Payment Link Generate a shareable payment link {created ? (

Payment link created successfully!

{newUrl}

) : ( <>

Link Name setLinkName(e.target.value)} />

Amount setLinkAmount(e.target.value)} />

Currency

)} Link History Previously created payment links Name Amount Used Created Status Actions {linkHistory.map((link) => ( {link.name} {link.amount} {link.used} {link.created} {statusConfig[link.status].label}

))}

) }

Name	Amount	Used	Created	Status
Invoice INV-001	MK 51,000	0	Jun 10, 2026	Active
Consulting Fee	MK 255,000	1	Jun 08, 2026	Active
Design Project	MK 850,000	0	May 20, 2026	Expired
Monthly Retainer	MK 3,400,000	3	May 01, 2026	Disabled

Name	Amount	Used	Created	Status
Invoice INV-001	MK 51,000	0	Jun 10, 2026	Active
Consulting Fee	MK 255,000	1	Jun 08, 2026	Active
Design Project	MK 850,000	0	May 20, 2026	Expired
Monthly Retainer	MK 3,400,000	3	May 01, 2026	Disabled