Table

import { Badge } from '@/components/ui/badge'
import {
  Table,
  TableBody,
  TableCaption,
  TableCell,
  TableFooter,
  TableHead,
  TableHeader,
  TableRow,
} from '@/components/ui/table'

const invoices = [
  { id: 'INV-1042', customer: 'Northwind Traders', status: 'Paid', amount: 1250 },
  { id: 'INV-1043', customer: 'Contoso Ltd', status: 'Overdue', amount: 860 },
  { id: 'INV-1044', customer: 'Fabrikam', status: 'Draft', amount: 4300 },
] as const

const STATUS = { Paid: 'success', Overdue: 'destructive', Draft: 'secondary' } as const
const usd = new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' })

export default function TableBasic() {
  return (
    <Table>
      <TableCaption>Invoices issued in September 2026</TableCaption>
      <TableHeader>
        <TableRow>
          <TableHead>Invoice</TableHead>
          <TableHead>Customer</TableHead>
          <TableHead>Status</TableHead>
          <TableHead className="text-right">Amount</TableHead>
        </TableRow>
      </TableHeader>
      <TableBody>
        {invoices.map((inv) => (
          <TableRow key={inv.id}>
            <TableHead scope="row" className="font-medium text-foreground">
              {inv.id}
            </TableHead>
            <TableCell>{inv.customer}</TableCell>
            <TableCell>
              <Badge variant={STATUS[inv.status]}>{inv.status}</Badge>
            </TableCell>
            <TableCell className="text-right tabular-nums">{usd.format(inv.amount)}</TableCell>
          </TableRow>
        ))}
      </TableBody>
      <TableFooter>
        <TableRow>
          <TableHead scope="row" colSpan={3} className="text-foreground">
            Total
          </TableHead>
          <TableCell className="text-right tabular-nums">{usd.format(6410)}</TableCell>
        </TableRow>
      </TableFooter>
    </Table>
  )
}