trptk/components/PaginationNav.tsx

import Link from "next/link";
import {
  HiOutlineChevronDoubleLeft,
  HiOutlineChevronLeft,
  HiOutlineChevronRight,
  HiOutlineChevronDoubleRight,
} from "react-icons/hi2";
import { IconButton, iconButtonClass } from "@/components/IconButton";

type PaginationNavProps = {
  page: number;
  totalPages: number;
  buildHref: (page: number) => string;
  className?: string;
};

export function PaginationNav({ page, totalPages, buildHref, className }: PaginationNavProps) {
  if (totalPages <= 1) return null;

  const hasPrev = page > 1;
  const hasNext = page < totalPages;

  return (
    <nav aria-label="Pagination" className={className ?? "mt-12 flex items-center justify-between"}>
      <div className="text-sm text-lightsec dark:text-darksec">
        Page {page} of {totalPages}
      </div>

      <div className="flex gap-3 text-lg">
        {hasPrev ? (
          <Link href={buildHref(1)} className={iconButtonClass} aria-label="First page">
            <HiOutlineChevronDoubleLeft />
          </Link>
        ) : (
          <IconButton disabled aria-label="First page">
            <HiOutlineChevronDoubleLeft />
          </IconButton>
        )}

        {hasPrev ? (
          <Link href={buildHref(page - 1)} className={iconButtonClass} aria-label="Previous page">
            <HiOutlineChevronLeft />
          </Link>
        ) : (
          <IconButton disabled aria-label="Previous page">
            <HiOutlineChevronLeft />
          </IconButton>
        )}

        {hasNext ? (
          <Link href={buildHref(page + 1)} className={iconButtonClass} aria-label="Next page">
            <HiOutlineChevronRight />
          </Link>
        ) : (
          <IconButton disabled aria-label="Next page">
            <HiOutlineChevronRight />
          </IconButton>
        )}

        {hasNext ? (
          <Link href={buildHref(totalPages)} className={iconButtonClass} aria-label="Last page">
            <HiOutlineChevronDoubleRight />
          </Link>
        ) : (
          <IconButton disabled aria-label="Last page">
            <HiOutlineChevronDoubleRight />
          </IconButton>
        )}
      </div>
    </nav>
  );
}