havaran/src/components/Pagination.tsx

type PaginationProps = {
  basePath: string;
  page: number;
  pageSize: number;
  total: number;
};

function buildHref(basePath: string, page: number) {
  if (page <= 1) return basePath;
  return `${basePath}?page=${page}`;
}

function pageItems(current: number, totalPages: number): (number | "…")[] {
  if (totalPages <= 7) {
    return Array.from({ length: totalPages }, (_, i) => i + 1);
  }

  const items: (number | "…")[] = [1];
  const start = Math.max(2, current - 1);
  const end = Math.min(totalPages - 1, current + 1);

  if (start > 2) items.push("…");
  for (let p = start; p <= end; p += 1) items.push(p);
  if (end < totalPages - 1) items.push("…");
  items.push(totalPages);
  return items;
}

export function Pagination({ basePath, page, pageSize, total }: PaginationProps) {
  const totalPages = Math.max(1, Math.ceil(total / pageSize));
  if (totalPages <= 1) return null;

  const current = Math.min(Math.max(1, page), totalPages);
  const pages = pageItems(current, totalPages);

  return (
    <nav className="pagination-nav" aria-label="صفحه‌بندی">
      <ul className="pagination-list">
        <li>
          {current > 1 ? (
            <a href={buildHref(basePath, current - 1)} className="pagination-link">
              قبلی
            </a>
          ) : (
            <span className="pagination-link is-disabled">قبلی</span>
          )}
        </li>

        {pages.map((item, index) =>
          item === "…" ? (
            <li key={`ellipsis-${index}`}>
              <span className="pagination-ellipsis">…</span>
            </li>
          ) : (
            <li key={item}>
              {item === current ? (
                <span className="pagination-link is-active" aria-current="page">
                  {item}
                </span>
              ) : (
                <a href={buildHref(basePath, item)} className="pagination-link">
                  {item}
                </a>
              )}
            </li>
          ),
        )}

        <li>
          {current < totalPages ? (
            <a href={buildHref(basePath, current + 1)} className="pagination-link">
              بعدی
            </a>
          ) : (
            <span className="pagination-link is-disabled">بعدی</span>
          )}
        </li>
      </ul>
    </nav>
  );
}