Invoice

import {
  Badge,
  Button,
  Card,
  CardContent,
  CardFooter,
  CardHeader,
  CardTitle,
  Separator,
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@cooud-ui/ui";
import { Download } from "lucide-react";

interface InvoiceItem {
  id: string;
  description: string;
  qty: number;
  unit: string;
  amount: string;
}

const invoiceItems: InvoiceItem[] = [
  { id: "playbook", description: "The Creator Playbook — Lifetime", qty: 1, unit: "$129.00", amount: "$129.00" },
  { id: "seats", description: "Team seats", qty: 3, unit: "$12.00", amount: "$36.00" },
  { id: "support", description: "Priority support — 1 year", qty: 1, unit: "$48.00", amount: "$48.00" },
];

export function InvoiceBlock() {
  return (
    <Card aria-label="Invoice" className="mx-auto w-full max-w-2xl gap-0 pb-0 shadow-md">
      <CardHeader>
        <CardTitle className="font-display text-xl">Invoice INV-2026-0188</CardTitle>
        <p className="col-span-full text-sm text-fg-secondary">Issued Jun 18, 2026 · Due on receipt</p>
        <div className="col-start-2 row-span-2 row-start-1 self-start justify-self-end">
          <Badge variant="success">Paid</Badge>
        </div>
      </CardHeader>

      <CardContent className="grid grid-cols-2 gap-4 pb-2">
        <div className="flex flex-col gap-1">
          <span className="text-xs font-medium uppercase tracking-wide text-fg-tertiary">From</span>
          <span className="text-sm font-medium text-fg">Cooud Studio</span>
          <span className="text-sm text-fg-secondary">billing@cooud.studio</span>
        </div>
        <div className="flex flex-col gap-1">
          <span className="text-xs font-medium uppercase tracking-wide text-fg-tertiary">
            Billed to
          </span>
          <span className="text-sm font-medium text-fg">Alex Morgan</span>
          <span className="text-sm text-fg-secondary">alex@email.com</span>
        </div>
      </CardContent>

      <Separator className="my-4" />

      <CardContent className="px-0">
        <Table>
          <TableHeader>
            <TableRow>
              <TableHead className="pl-4 sm:pl-6">Description</TableHead>
              <TableHead className="text-right">Qty</TableHead>
              <TableHead className="text-right">Unit</TableHead>
              <TableHead className="pr-4 text-right sm:pr-6">Amount</TableHead>
            </TableRow>
          </TableHeader>
          <TableBody>
            {invoiceItems.map((item) => (
              <TableRow key={item.id}>
                <TableCell className="pl-4 font-medium text-fg sm:pl-6">{item.description}</TableCell>
                <TableCell className="text-right text-fg-secondary">{item.qty}</TableCell>
                <TableCell className="text-right text-fg-secondary">{item.unit}</TableCell>
                <TableCell className="pr-4 text-right text-fg sm:pr-6">{item.amount}</TableCell>
              </TableRow>
            ))}
          </TableBody>
        </Table>
      </CardContent>

      <Separator className="my-4" />

      <CardContent className="flex flex-col items-end gap-2">
        <div className="flex w-full max-w-xs flex-col gap-2">
          <div className="flex items-center justify-between text-sm text-fg-secondary">
            <span>Subtotal</span>
            <span className="text-fg">$213.00</span>
          </div>
          <div className="flex items-center justify-between text-sm text-fg-secondary">
            <span>Tax (8%)</span>
            <span className="text-fg">$17.04</span>
          </div>
          <Separator />
          <div className="flex items-center justify-between">
            <span className="font-medium text-fg">Total paid</span>
            <span className="font-display text-xl font-semibold text-fg">$230.04</span>
          </div>
        </div>
      </CardContent>

      <Separator />

      <CardFooter className="justify-between gap-3 py-5">
        <span className="text-xs text-fg-tertiary">Paid via Visa ···4242 on Jun 18, 2026</span>
        <Button variant="outline" size="sm">
          <Download className="size-4" aria-hidden="true" />
          Download
        </Button>
      </CardFooter>
    </Card>
  );
}