"use client";

import React from "react";
import PaginationWithLinks from "@/components/ui/pagination-with-links";
import { DataTable } from "@/components/ui/data-table";
import { ColumnDef } from "@tanstack/react-table";

interface PaginatedDataTableProps<TData, TValue> {
  columns: ColumnDef<TData, TValue>[];
  data: TData[];
  page: number;
  pageSize: number;
  totalCount: number;
  onRowClick?: (row: TData) => void;
  pageSizeOptions?: number[];
  emptyState?: React.ReactNode;
  toolbar?: React.ReactNode;
}

/**
 * PaginatedDataTable standardizes list views by wrapping DataTable with
 * top-aligned Pagination/Toolbar and bottom-aligned Pagination.
 */
export function PaginatedDataTable<TData, TValue>({
  columns,
  data,
  page,
  pageSize,
  totalCount,
  onRowClick,
  pageSizeOptions = [10, 20, 50],
  emptyState,
  toolbar,
}: PaginatedDataTableProps<TData, TValue>) {
  return (
    <div className="space-y-4">
      <div className="flex flex-wrap items-center justify-between gap-4">
        <div className="flex flex-1 items-center gap-2 min-w-0">
          {toolbar}
        </div>
        <PaginationWithLinks
          page={page}
          pageSize={pageSize}
          totalCount={totalCount}
          pageSizeSelectOptions={{ pageSizeOptions }}
        />
      </div>
      <div className="rounded-md border bg-card overflow-hidden">
        <DataTable
          columns={columns}
          data={data}
          onRowClick={onRowClick}
          emptyState={emptyState}
        />
      </div>
      <div className="flex justify-end py-2 border-t">
        <PaginationWithLinks
          page={page}
          pageSize={pageSize}
          totalCount={totalCount}
        />
      </div>
    </div>
  );
}