Receipt

import {
  Badge,
  Card,
  CardContent,
  CardFooter,
  CardHeader,
  CardTitle,
} from "@cronus-ui/ui";

interface ReceiptLine {
  id: string;
  name: string;
  qty: string;
  amount: string;
}

const receiptLines: ReceiptLine[] = [
  { id: "playbook", name: "Creator Playbook — Lifetime", qty: "1 × $129.00", amount: "$129.00" },
  { id: "seats", name: "Team seats", qty: "3 × $12.00", amount: "$36.00" },
  { id: "support", name: "Priority support — 1 yr", qty: "1 × $48.00", amount: "$48.00" },
];

export function InvoiceReceiptBlock() {
  return (
    <Card role="group" aria-label="Receipt" className="mx-auto w-full max-w-xs gap-0 shadow-md">
      <CardHeader className="flex flex-col items-center gap-1 text-center">
        <CardTitle className="font-display text-lg">Cronus Studio</CardTitle>
        <p className="text-xs text-fg-secondary">548 Market St · San Francisco, CA</p>
        <p className="font-mono text-xs text-fg-tertiary">INV-2026-0188 · Jun 18, 2026 · 14:32</p>
      </CardHeader>

      <CardContent className="flex flex-col gap-4 pt-4">
        <div aria-hidden="true" className="border-t border-dashed border-border" />

        <ul className="flex flex-col gap-3">
          {receiptLines.map((line) => (
            <li key={line.id} className="flex items-start justify-between gap-4">
              <div className="flex flex-col">
                <span className="text-sm text-fg">{line.name}</span>
                <span className="font-mono text-xs text-fg-tertiary">{line.qty}</span>
              </div>
              <span className="font-mono text-sm text-fg">{line.amount}</span>
            </li>
          ))}
        </ul>

        <div aria-hidden="true" className="border-t border-dashed border-border" />

        <div className="flex flex-col gap-1.5">
          <div className="flex items-center justify-between text-sm text-fg-secondary">
            <span>Subtotal</span>
            <span className="font-mono text-fg">$213.00</span>
          </div>
          <div className="flex items-center justify-between text-sm text-fg-secondary">
            <span>Tax (8%)</span>
            <span className="font-mono text-fg">$17.04</span>
          </div>
          <div className="flex items-center justify-between font-medium text-fg">
            <span className="text-sm">Total</span>
            <span className="font-mono text-base font-semibold">$230.04</span>
          </div>
        </div>

        <div aria-hidden="true" className="border-t border-dashed border-border" />

        <div className="flex justify-center py-1">
          <Badge variant="success" className="-rotate-2 uppercase tracking-widest">
            Paid
          </Badge>
        </div>
      </CardContent>

      <CardFooter className="flex-col items-center gap-1 pt-2 text-center">
        <p className="font-mono text-xs text-fg-tertiary">Visa ···4242 · Auth 081294</p>
        <p className="text-xs text-fg-tertiary">Thanks for supporting independent creators.</p>
      </CardFooter>
    </Card>
  );
}