"use client";

import { getCoreRowModel, useReactTable } from "@tanstack/react-table";

import {
  DataTablePagination,
  DataTableShell,
  useServerPagination,
  type ServerPaginationMeta,
} from "@/app/dashboard/_components/data-table";

import { userColumns } from "./columns";
import type { UserRow } from "./schema";

type Props = {
  data: UserRow[];
  pagination: ServerPaginationMeta;
};

export function UsersTable({ data, pagination: serverPagination }: Props) {
  const { pagination, onPaginationChange, totalCount } = useServerPagination(serverPagination);

  const table = useReactTable({
    data,
    columns: userColumns,
    state: { pagination },
    onPaginationChange,
    manualPagination: true,
    pageCount: serverPagination.pageCount,
    rowCount: totalCount,
    getCoreRowModel: getCoreRowModel(),
    getRowId: (row) => String(row.id),
  });

  return (
    <div className="space-y-4">
      <DataTableShell
        table={table}
        columnCount={userColumns.length}
        emptyMessage="No backend users found."
      />

      <DataTablePagination table={table} totalRows={totalCount} itemNoun="user" idPrefix="users" />
    </div>
  );
}