"use client"

import type { Table } from "@tanstack/react-table"

import { PageSizeSelect, PageStepButtons } from "@/components/ui/pagination-controls"

type XmlApiTablePaginationProps<T> = {
  table: Table<T>
  pageSizeOptions?: number[]
}

export function XmlApiTablePagination<T>({
  table,
  pageSizeOptions = [10, 20, 50],
}: XmlApiTablePaginationProps<T>) {
  const pageIndex = table.getState().pagination.pageIndex
  const pageSize = table.getState().pagination.pageSize

  return (
    <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-end">
      <PageSizeSelect
        value={pageSize}
        options={pageSizeOptions}
        onValueChange={(size) => {
          table.setPageSize(size)
          table.setPageIndex(0)
        }}
        labelClassName="text-sm whitespace-nowrap"
      />
      <PageStepButtons
        canPrevious={table.getCanPreviousPage()}
        canNext={table.getCanNextPage()}
        onPrevious={() => table.previousPage()}
        onNext={() => table.nextPage()}
      >
        <span className="px-2 text-sm text-muted-foreground">
          Page {pageIndex + 1} of {table.getPageCount() || 1}
        </span>
      </PageStepButtons>
    </div>
  )
}