Presupuestador_web/client/src/components/DataTable/DataTablePagination.tsx

import { DEFAULT_PAGE_SIZES, INITIAL_PAGE_INDEX } from "@/lib/hooks";
import { cn } from "@/lib/utils";
import { Button, Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/ui";
import { Table } from "@tanstack/react-table";
import { t } from "i18next";
import {
  ChevronLeftIcon,
  ChevronRightIcon,
  ChevronsLeftIcon,
  ChevronsRightIcon,
} from "lucide-react";
import { useMemo } from "react";

export type DataTablePaginationProps<TData> = {
  table: Table<TData>;
  className?: string;
  visible?: boolean | "auto";
};

export function DataTablePagination<TData>({
  table,
  className,
  visible = "auto",
}: DataTablePaginationProps<TData>) {
  const isVisible = useMemo(() => visible === true, [visible]);
  const isAuto = useMemo(() => visible === "auto", [visible]);

  if (!isVisible || (isAuto && table.getPageCount() < 1)) {
    return null;
  }

  return (
    <div className={cn("flex items-center justify-between px-2", className)}>
      <div className='flex-1 text-base text-muted-foreground'>
        {t("common.rows_selected", {
          count: table.getFilteredSelectedRowModel().rows.length,
          total: table.getFilteredRowModel().rows.length,
        })}
      </div>
      <div className='flex items-center space-x-6 lg:space-x-8'>
        <div className='flex items-center space-x-2'>
          <p className='text-base font-medium'>{t("common.rows_per_page")}</p>

          <Select
            value={`${table.getState().pagination.pageSize}`}
            onValueChange={(value) => {
              table.setPageSize(Number(value));
            }}
          >
            <SelectTrigger className='h-8 w-[70px]'>
              <SelectValue placeholder={table.getState().pagination.pageSize} />
            </SelectTrigger>
            <SelectContent side='top'>
              {DEFAULT_PAGE_SIZES.map((pageSize) => (
                <SelectItem key={pageSize} value={`${pageSize}`}>
                  {pageSize}
                </SelectItem>
              ))}
            </SelectContent>
          </Select>
        </div>
        <div className='flex w-[100px] items-center justify-center text-base font-medium'>
          {t("common.num_page_of_total", {
            count: table.getState().pagination.pageIndex + 1,
            total: table.getPageCount(),
          })}
        </div>
        <div className='flex items-center space-x-2'>
          <Button
            variant='outline'
            className='hidden w-8 h-8 p-0 lg:flex'
            onClick={() => table.setPageIndex(INITIAL_PAGE_INDEX)}
            disabled={!table.getCanPreviousPage()}
          >
            <span className='sr-only'>{t("common.go_to_first_page")}</span>
            <ChevronsLeftIcon className='w-4 h-4' />
          </Button>
          <Button
            variant='outline'
            className='w-8 h-8 p-0'
            onClick={() => table.previousPage()}
            disabled={!table.getCanPreviousPage()}
          >
            <span className='sr-only'>{t("common.go_to_prev_page")}</span>
            <ChevronLeftIcon className='w-4 h-4' />
          </Button>
          <Button
            variant='outline'
            className='w-8 h-8 p-0'
            onClick={() => table.nextPage()}
            disabled={!table.getCanNextPage()}
          >
            <span className='sr-only'>{t("common.go_to_next_page")}</span>
            <ChevronRightIcon className='w-4 h-4' />
          </Button>
          <Button
            variant='outline'
            className='hidden w-8 h-8 p-0 lg:flex'
            onClick={() => table.setPageIndex(table.getPageCount() + 1)}
            disabled={!table.getCanNextPage()}
          >
            <span className='sr-only'>{t("common.go_to_last_page")}</span>
            <ChevronsRightIcon className='w-4 h-4' />
          </Button>
        </div>
      </div>
    </div>
  );
}