Table

"use client"

import * as React from "react"
import { Table, TableBody, TableCaption, TableCell, TableEmpty, TableFooter, TableHead, TableHeader, TableRow } from "@/components/candor/ui/table"
import { useFormat } from "@/components/candor/locale"

const invoices = [
  { id: "INV-1042", status: "Paid", method: "Card", amount: 250 },
  { id: "INV-1043", status: "Pending", method: "Bank transfer", amount: 1200 },
  { id: "INV-1044", status: "Unpaid", method: "Card", amount: 89.5 },
]

export default function Example() {
  const fmt = useFormat()
  const [selected, setSelected] = React.useState<string | null>("INV-1043")
  const total = invoices.reduce((sum, i) => sum + i.amount, 0)
  const money = { style: "currency", currency: "USD" } as const
  return (
    <Table label="Invoices">
      <TableCaption>Invoices for October. Select a row to mark it.</TableCaption>
      <TableHeader>
        <TableRow>
          <TableHead>Invoice</TableHead>
          <TableHead>Status</TableHead>
          <TableHead>Method</TableHead>
          <TableHead numeric>Amount</TableHead>
        </TableRow>
      </TableHeader>
      <TableBody>
        {invoices.length === 0 ? (
          <TableEmpty colSpan={4}>No invoices yet.</TableEmpty>
        ) : (
          invoices.map((i) => (
            <TableRow key={i.id} data-state={selected === i.id ? "selected" : undefined} onClick={() => setSelected(i.id)}>
              <TableCell className="font-medium">{i.id}</TableCell>
              <TableCell>{i.status}</TableCell>
              <TableCell>{i.method}</TableCell>
              <TableCell numeric>{fmt.number(i.amount, money)}</TableCell>
            </TableRow>
          ))
        )}
      </TableBody>
      <TableFooter>
        <TableRow>
          <TableCell colSpan={3}>Total</TableCell>
          <TableCell numeric>{fmt.number(total, money)}</TableCell>
        </TableRow>
      </TableFooter>
    </Table>
  )
}