Pagination

"use client";

import * as React from "react";

import {
  Pagination,
  PaginationContent,
  PaginationEllipsis,
  PaginationItem,
  PaginationLink,
  PaginationNext,
  PaginationPrevious,
} from "@/components/ui/pagination";

/**
 * Live Pagination example — `"use client"` only to hold the demos' current-page
 * state; the Pagination parts themselves are server components. Every control
 * is a real `<a>` with an `href` (the page route in a real app) plus an
 * `onClick` that calls `preventDefault()` so the demo updates state in place
 * and never navigates or scrolls the document. The disabled Previous / Next at
 * the ends drop both `href` and the handler automatically.
 */
const WINDOWED_TOTAL = 8;
const COMPACT_TOTAL = 5;

export function PaginationShowcase() {
  const [windowed, setWindowed] = React.useState(1);
  const [compact, setCompact] = React.useState(1);

  const stay =
    (set: (n: number) => void, n: number) => (event: React.MouseEvent) => {
      event.preventDefault();
      set(n);
    };

  const near = [1, 2].filter((n) => n < WINDOWED_TOTAL);

  return (
    <div className="flex flex-col gap-8">
      <section className="flex flex-col gap-3">
        <h3 className="text-sm font-medium leading-snug text-muted-foreground">
          Windowed — first pages, an ellipsis, the last page (page {windowed} of{" "}
          {WINDOWED_TOTAL})
        </h3>
        <Pagination>
          <PaginationContent>
            <PaginationItem>
              <PaginationPrevious
                href={`?page=${windowed - 1}`}
                onClick={stay(setWindowed, Math.max(1, windowed - 1))}
                disabled={windowed === 1}
              />
            </PaginationItem>

            {near.map((n) => (
              <PaginationItem key={n}>
                <PaginationLink
                  href={`?page=${n}`}
                  onClick={stay(setWindowed, n)}
                  isActive={windowed === n}
                >
                  {n}
                </PaginationLink>
              </PaginationItem>
            ))}

            <PaginationItem>
              <PaginationEllipsis />
            </PaginationItem>

            <PaginationItem>
              <PaginationLink
                href={`?page=${WINDOWED_TOTAL}`}
                onClick={stay(setWindowed, WINDOWED_TOTAL)}
                isActive={windowed === WINDOWED_TOTAL}
              >
                {WINDOWED_TOTAL}
              </PaginationLink>
            </PaginationItem>

            <PaginationItem>
              <PaginationNext
                href={`?page=${windowed + 1}`}
                onClick={stay(
                  setWindowed,
                  Math.min(WINDOWED_TOTAL, windowed + 1),
                )}
                disabled={windowed === WINDOWED_TOTAL}
              />
            </PaginationItem>
          </PaginationContent>
        </Pagination>
      </section>

      <section className="flex flex-col gap-3">
        <h3 className="text-sm font-medium leading-snug text-muted-foreground">
          Compact — every page shown, no ellipsis (page {compact} of{" "}
          {COMPACT_TOTAL})
        </h3>
        <Pagination>
          <PaginationContent>
            <PaginationItem>
              <PaginationPrevious
                href={`?page=${compact - 1}`}
                onClick={stay(setCompact, Math.max(1, compact - 1))}
                disabled={compact === 1}
              />
            </PaginationItem>

            {Array.from({ length: COMPACT_TOTAL }, (_, i) => i + 1).map((n) => (
              <PaginationItem key={n}>
                <PaginationLink
                  href={`?page=${n}`}
                  onClick={stay(setCompact, n)}
                  isActive={compact === n}
                >
                  {n}
                </PaginationLink>
              </PaginationItem>
            ))}

            <PaginationItem>
              <PaginationNext
                href={`?page=${compact + 1}`}
                onClick={stay(setCompact, Math.min(COMPACT_TOTAL, compact + 1))}
                disabled={compact === COMPACT_TOTAL}
              />
            </PaginationItem>
          </PaginationContent>
        </Pagination>
      </section>
    </div>
  );
}