Table

import Table, {
  TableBody,
  TableCell,
  TableFooter,
  TableHead,
  TableRow,
} from "@/components/ui/table";

const orders = [
  { product: "Wireless Headphones", quantity: 2, total: "$398.00" },
  { product: "Mechanical Keyboard", quantity: 1, total: "$149.00" },
  { product: "USB-C Hub", quantity: 3, total: "$267.00" },
];

export default function TableFooterDemo() {
  const total = orders.reduce(
    (sum, order) => sum + Number(order.total.replace("$", "")),
    0,
  );

  return (
    <Table>
      <TableHead>
        <TableRow>
          <TableCell>Product</TableCell>
          <TableCell align="right">Quantity</TableCell>
          <TableCell align="right">Total</TableCell>
        </TableRow>
      </TableHead>
      <TableBody>
        {orders.map((order) => (
          <TableRow key={order.product}>
            <TableCell>{order.product}</TableCell>
            <TableCell align="right">{order.quantity}</TableCell>
            <TableCell align="right">{order.total}</TableCell>
          </TableRow>
        ))}
      </TableBody>
      <TableFooter className="bg-neutral-100 dark:bg-neutral-900">
        <TableRow>
          <TableCell className="font-semibold">Total</TableCell>
          <TableCell align="right" className="font-semibold">
            {orders.reduce((sum, order) => sum + order.quantity, 0)}
          </TableCell>
          <TableCell align="right" className="font-semibold">
            ${total.toFixed(2)}
          </TableCell>
        </TableRow>
      </TableFooter>
    </Table>
  );
}