import { Check } from "lucide-react"

const payment = {
  referenceNumber: "TXN-2026-048391",
  dateTime: "09 Apr 2026, 10:15 AM",
  paymentMethod: "Visa •••• 4242",
  subtotal: 129.0,
  discount: 19.35,
  total: 109.65,
}

function formatCurrency(amount: number) {
  return new Intl.NumberFormat("en-US", {
    style: "currency",
    currency: "USD",
    minimumFractionDigits: 2,
  }).format(amount)
}

export default function PaymentSuccessReceipt() {
  return (
    <div className="bg-card relative w-full max-w-lg overflow-hidden rounded-3xl shadow-xl">
      <div className="flex flex-col items-center px-12 pt-12 pb-10 text-center">
        <div className="mb-6">
          <div className="bg-primary/10 ring-primary/20 relative flex h-20 w-20 items-center justify-center rounded-full ring-8">
            <div className="bg-primary shadow-primary/30 flex h-14 w-14 items-center justify-center rounded-full shadow-lg">
              <Check className="text-primary-foreground h-7 w-7 stroke-[3]" />
            </div>
          </div>
        </div>
        <h2 className="text-foreground text-2xl font-semibold tracking-tight">
          Payment Successful
        </h2>
      </div>

      <div className="relative flex items-center py-0.5">
        <div className="bg-surface absolute -left-4 h-8 w-8 rounded-full" />
        <div className="bg-surface absolute -right-4 h-8 w-8 rounded-full" />
        <div className="border-border mx-5 flex-1 border-t-2 border-dashed" />
      </div>

      <div className="space-y-6 px-12 py-9">
        <div className="flex items-center justify-between gap-4">
          <span className="text-muted-foreground text-sm">Transaction ID</span>
          <span className="text-foreground font-mono text-sm font-light tracking-wide">
            {payment.referenceNumber}
          </span>
        </div>
        <div className="flex items-center justify-between gap-4">
          <span className="text-muted-foreground text-sm">Date &amp; Time</span>
          <span className="text-foreground text-sm font-light">
            {payment.dateTime}
          </span>
        </div>
        <div className="flex items-center justify-between gap-4">
          <span className="text-muted-foreground text-sm">Payment method</span>
          <span className="text-foreground text-sm font-semibold">
            {payment.paymentMethod}
          </span>
        </div>
      </div>

      <div className="border-border mx-12 border-t border-dashed" />

      <div className="space-y-6 px-12 py-9">
        <div className="flex items-center justify-between gap-4">
          <span className="text-muted-foreground text-sm">Subtotal</span>
          <span className="text-foreground text-sm font-light tabular-nums">
            {formatCurrency(payment.subtotal)}
          </span>
        </div>
        <div className="flex items-center justify-between gap-4">
          <span className="text-muted-foreground text-sm">Discount</span>
          <span className="text-primary text-sm font-light tabular-nums">
            &minus;{formatCurrency(payment.discount)}
          </span>
        </div>
      </div>

      <div className="border-border mx-12 border-t border-dashed" />

      <div className="px-12 py-9">
        <div className="flex items-center justify-between">
          <span className="text-foreground font-light">Total</span>
          <span className="text-foreground text-2xl font-light tabular-nums">
            {formatCurrency(payment.total)}
          </span>
        </div>
      </div>
    </div>
  )
}