import type { JSX } from "solid-js";
import { useInternalDataTableContext } from "./data-table-context";

/**
 * Renders page navigation controls: a "Previous" button, a "Page X of Y"
 * label, and a "Next" button. Buttons are disabled at the page boundaries.
 */
export function DataTablePagination(): JSX.Element {
  const ctx = useInternalDataTableContext();

  const isFirst = () => ctx.currentPage() === 0;
  const isLast = () => ctx.currentPage() >= ctx.pageCount() - 1;

  return (
    <div data-part="pagination">
      <button
        type="button"
        onClick={() => ctx.goToPage(ctx.currentPage() - 1)}
        disabled={isFirst()}
        aria-label="Previous page"
      >
        Previous
      </button>
      <span>
        Page {ctx.currentPage() + 1} of {ctx.pageCount()}
      </span>
      <button
        type="button"
        onClick={() => ctx.goToPage(ctx.currentPage() + 1)}
        disabled={isLast()}
        aria-label="Next page"
      >
        Next
      </button>
    </div>
  );
}
