+import Link from "next/link";

+import type { ReactNode } from "react";

+

+interface PaginationProps {

+  /** 1-based. */

+  currentPage: number;

+  totalPages: number;

+  /** 각 페이지 번호로 이동할 href를 만들어 준다 — 라우팅은 소비처 책임. */

+  buildHref: (page: number) => string;

+  /** 한 번에 보여줄 번호 개수. 기본 5. */

+  windowSize?: number;

+}

+

+const ITEM_CLASSES =

+  "inline-flex size-9 items-center justify-center rounded-md text-body-sm transition-colors duration-200";

+const ENABLED_CLASSES = "text-foreground-muted hover:bg-surface-muted hover:text-foreground";

+const DISABLED_CLASSES = "text-foreground-subtle opacity-50";

+const CURRENT_CLASSES = "bg-primary text-on-primary";

+

+/** 현재 페이지를 중심으로 windowSize개 번호를 [1, totalPages] 범위 안에서 슬라이딩한다. */

+function getPageWindow(currentPage: number, totalPages: number, windowSize: number): number[] {

+  if (totalPages < 1) {

+    return [];

+  }

+  const half = Math.floor(windowSize / 2);

+  let start = Math.max(1, currentPage - half);

+  const end = Math.min(totalPages, start + windowSize - 1);

+  start = Math.max(1, end - windowSize + 1);

+

+  const pages: number[] = [];

+  for (let page = start; page <= end; page += 1) {

+    pages.push(page);

+  }

+  return pages;

+}

+

+interface PaginationItemProps {

+  disabled: boolean;

+  href: string;

+  label: string;

+  children: ReactNode;

+}

+

+/** 처음·이전·다음·끝 이동 항목 — 비활성일 때는 링크 대신 aria-disabled span으로 렌더한다. */

+function PaginationItem({ disabled, href, label, children }: PaginationItemProps) {

+  if (disabled) {

+    return (

+      <span aria-disabled="true" aria-label={label} className={`${ITEM_CLASSES} ${DISABLED_CLASSES}`}>

+        {children}

+      </span>

+    );

+  }

+  return (

+    <Link href={href} aria-label={label} className={`${ITEM_CLASSES} ${ENABLED_CLASSES}`}>

+      {children}

+    </Link>

+  );

+}

+

+/**

+ * 페이지네이션 — « ‹ [번호들] › ». 페이지 이동은 `next/link` href 기반이며 실제 라우팅(쿼리

+ * 구성 등)은 `buildHref`를 통해 호출부(feature)가 책임진다. 첫/마지막 페이지에서는 처음·이전·

+ * 다음·끝 이동이 비활성 처리된다.

+ */

+export function Pagination({

+  currentPage,

+  totalPages,

+  buildHref,

+  windowSize = 5,

+}: PaginationProps) {

+  const pages = getPageWindow(currentPage, totalPages, windowSize);

+  const isFirst = currentPage <= 1;

+  const isLast = currentPage >= totalPages;

+

+  return (

+    <nav aria-label="페이지네이션" className="flex items-center justify-center gap-1">

+      <PaginationItem disabled={isFirst} href={buildHref(1)} label="처음 페이지">

+        «

+      </PaginationItem>

+      <PaginationItem

+        disabled={isFirst}

+        href={buildHref(Math.max(1, currentPage - 1))}

+        label="이전 페이지"

+      >

+        ‹

+      </PaginationItem>

+      {pages.map((page) => (

+        <Link

+          key={page}

+          href={buildHref(page)}

+          aria-current={page === currentPage ? "page" : undefined}

+          className={`${ITEM_CLASSES} ${page === currentPage ? CURRENT_CLASSES : ENABLED_CLASSES}`}

+        >

+          {page}

+        </Link>

+      ))}

+      <PaginationItem

+        disabled={isLast}

+        href={buildHref(Math.min(totalPages, currentPage + 1))}

+        label="다음 페이지"

+      >

+        ›

+      </PaginationItem>

+      <PaginationItem disabled={isLast} href={buildHref(totalPages)} label="마지막 페이지">

+        »

+      </PaginationItem>

+    </nav>

+  );

+}