Table e Pagination

"use client";

import { Card, CellText, Currency, Pagination, RowActionsMenu, Status, Table, Td, Th } from "@paytime/ui";
import { PenLine } from "lucide-react";
import { useState } from "react";

const PARTNERS = [
  { id: "1", name: "Grau Técnico LTDA", doc: "12.345.678/0001-90", tpv: 184200, active: true },
  { id: "2", name: "Mercado Bom Preço", doc: "98.765.432/0001-10", tpv: 52910.4, active: false },
  { id: "3", name: "Clínica Vida Plena", doc: "45.678.912/0001-33", tpv: 96120.75, active: true },
];

export default function Example() {
  const [page, setPage] = useState(1);
  return (
    <Card>
      <Table>
        <thead>
          <tr>
            <Th sortable>Parceiro</Th>
            <Th numeric>TPV 12M</Th>
            <Th>Status</Th>
            <Th className="w-13" />
          </tr>
        </thead>
        <tbody>
          {PARTNERS.map((partner) => (
            <tr key={partner.id}>
              <Td>
                <CellText title={partner.name} subtitle={partner.doc} mono />
              </Td>
              <Td numeric>
                <Currency value={partner.tpv} />
              </Td>
              <Td>
                <Status tone={partner.active ? "success" : "neutral"}>{partner.active ? "Ativo" : "Inativo"}</Status>
              </Td>
              <Td>
                <RowActionsMenu
                  label={`Ações de ${partner.name}`}
                  actions={[{ label: "Editar", icon: <PenLine />, onSelect: () => undefined }]}
                />
              </Td>
            </tr>
          ))}
        </tbody>
      </Table>
      <Pagination page={page} pageSize={20} total={240} onPageChange={setPage} />
    </Card>
  );
}