Table

"use client";

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

export default function TableExample() {
  return (
    <Table>
      <TableCaption>Recent workspace invoices.</TableCaption>
      <TableHeader>
        <TableRow>
          <TableHead>Invoice</TableHead>
          <TableHead>Status</TableHead>
          <TableHead className="text-end">Amount</TableHead>
        </TableRow>
      </TableHeader>
      <TableBody>
        {[
          { id: "INV-001", status: "Paid", amount: "$240.00" },
          { id: "INV-002", status: "Pending", amount: "$120.00" },
        ].map((invoice) => (
          <TableRow key={invoice.id}>
            <TableCell className="font-medium">{invoice.id}</TableCell>
            <TableCell>
              <Badge
                variant={invoice.status === "Paid" ? "success" : "warning"}
              >
                {invoice.status}
              </Badge>
            </TableCell>
            <TableCell className="text-end">{invoice.amount}</TableCell>
          </TableRow>
        ))}
      </TableBody>
      <TableFooter>
        <TableRow>
          <TableCell colSpan={2}>Total</TableCell>
          <TableCell className="text-end">$360.00</TableCell>
        </TableRow>
      </TableFooter>
    </Table>
  );
}