Table

import React, { memo, useState } from "react";
import { ShowMore } from "@/components/ui/show-more-1";
import { Table } from "@/components/ui/table-1";

const items = [
  {
    product: "Brake Pads Set",
    usage: "100 sets",
    price: "$50 per set",
    charge: 5000
  },
  {
    product: "Oil Filters",
    usage: "200 filters",
    price: "$10 per filter",
    charge: 2000
  },
  {
    product: "Car Batteries",
    usage: "50 batteries",
    price: "$100 per battery",
    charge: 5000
  },
  {
    product: "Headlight Bulbs",
    usage: "300 bulbs",
    price: "$15 per bulb",
    charge: 4500
  },
  {
    product: "Windshield Wipers",
    usage: "250 pairs",
    price: "$20 per pair",
    charge: 5000
  },
  {
    product: "Spark Plugs",
    usage: "500 sets",
    price: "$5 per set",
    charge: 2500
  }
];

export default function VirtualizedTableDemo() {
  const [expanded, setExpanded] = useState(false);
  return (
        <div className="w-1/2 mt-[8px] relative">
          <Table>
            <Table.Colgroup>
              <Table.Col className="w-[44%]" />
              <Table.Col className="w-[22%]" />
              <Table.Col className="w-[22%]" />
              <Table.Col className="w-[11%]" />
            </Table.Colgroup>
            <Table.Header>
              <Table.Row>
                <Table.Head>Product</Table.Head>
                <Table.Head>Usage</Table.Head>
                <Table.Head>Price</Table.Head>
                <Table.Head>Charge</Table.Head>
              </Table.Row>
            </Table.Header>
            <Table.Body interactive striped virtualize>
              {new Array(5_000).fill(null).map((_, index) => {
                if (!expanded && index >= 9) return null;
                const item = items[index % items.length];
                if (!item) return null;
                return <Row item={item} key={`${item.product}${index}`} />;
              })}
            </Table.Body>
          </Table>
          {expanded ? null : (
            <div
              className="pointer-events-none absolute bottom-0 left-0 h-[30%] w-full rounded bg-gradient-to-t from-white dark:from-[#0a0a0a] to-transparent opacity-80" />
          )}
          <div className={expanded ? "h-16" : "h-4"} />
          <div
            className="pointer-events-none absolute bottom-0 left-0 flex h-[calc(100%-160px)] w-full flex-col justify-end">
            <ShowMore
              className="pointer-events-auto sticky bottom-4 mb-4"
              expanded={expanded}
              noBorder
              onClick={() => setExpanded((x) => !x)}
            />
          </div>
        </div>
  );
}

const Row = memo(function Row({ item }: { item: (typeof items)[number] }) {
  return (
    <Table.Row>
      <Table.Cell>{item.product}</Table.Cell>
      <Table.Cell>{item.usage}</Table.Cell>
      <Table.Cell>{item.price}</Table.Cell>
      <Table.Cell>{formatCurrency(item.charge)}</Table.Cell>
    </Table.Row>
  );
});