Payment Confirmed

1'use client'
2 
3import { Button } from '@/components/ui/button'
4import { Check, ExternalLink } from 'lucide-react'
5import { demoPaymentConfirmed } from './demo/payment'
6 
7/**
8 * ═══════════════════════════════════════════════════════════════════════════
9 * PaymentConfirmedProps
10 * ═══════════════════════════════════════════════════════════════════════════
11 *
12 * Props for a payment confirmation card with product image, price, delivery info,
13 * and tracking button. Supports default (detailed) and compressed layouts.
14 */
15export interface PaymentConfirmedProps {
16  data?: {
17    /** Order reference number displayed in the header. */
18    orderId?: string
19    /** Name of the purchased product. */
20    productName?: string
21    /** Product description or variant details (e.g., "Nike - Size 42 - White"). Only shown in default variant. */
22    productDescription?: string
23    /** URL to the product image. */
24    productImage?: string
25    /** Total price paid for the order. */
26    price?: number
27    /** Expected delivery date string (e.g., "Tue. Dec 10"). */
28    deliveryDate?: string
29  }
30  actions?: {
31    /** Called when the user clicks the track order button. */
32    onTrackOrder?: () => void
33  }
34  appearance?: {
35    /**
36     * Display variant: "default" shows detailed layout with header, "compressed" shows compact inline layout.
37     * @default "default"
38     */
39    variant?: 'default' | 'compressed'
40    /**
41     * Currency code for formatting the price.
42     * @default "EUR"
43     */
44    currency?: string
45  }
46}
47 
48/**
49 * A payment confirmation card with product image, price, delivery info, and tracking button.
50 * Supports two variants: default (detailed with header) and compressed (compact inline).
51 *
52 * Features:
53 * - Success checkmark with "Payment confirmed" header
54 * - Order ID reference
55 * - Product image and description (default variant only)
56 * - Price and delivery date display
57 * - Track order button
58 * - Responsive mobile/desktop layouts
59 *
60 * @component
61 * @example
62 * ```tsx
63 * <PaymentConfirmed
64 *   data={{
65 *     orderId: "ORD-2024-5678",
66 *     productName: "Running Shoes",
67 *     productDescription: "Nike · Size 10 · Black",
68// … truncated