"use client";

import { buildPageItems } from "@/components/catalog/utils";
import styles from "@/components/BusinessDetailsPage.module.css";

export default function CatalogPagination({
  page,
  total,
  pageSize,
  onChange,
  busy,
}: {
  page: number;
  total: number;
  pageSize: number;
  onChange: (page: number) => void;
  busy?: boolean;
}) {
  const pageCount = Math.max(1, Math.ceil(total / pageSize));
  if (total <= pageSize) return null;
  const items = buildPageItems(page, pageCount);

  return (
    <div className={styles.pagination}>
      <button
        type="button"
        className={styles.pageBtn}
        disabled={busy || page <= 1}
        onClick={() => onChange(page - 1)}
        aria-label="Previous page"
      >
        Prev
      </button>
      <div className={styles.pageNumbers}>
        {items.map((item, index) =>
          item === "…" ? (
            <span key={`ellipsis-${index}`} className={styles.pageEllipsis}>
              …
            </span>
          ) : (
            <button
              key={item}
              type="button"
              className={item === page ? styles.pageNumActive : styles.pageNum}
              disabled={busy || item === page}
              onClick={() => onChange(item)}
              aria-current={item === page ? "page" : undefined}
            >
              {item}
            </button>
          ),
        )}
      </div>
      <button
        type="button"
        className={styles.pageBtn}
        disabled={busy || page >= pageCount}
        onClick={() => onChange(page + 1)}
        aria-label="Next page"
      >
        Next
      </button>
    </div>
  );
}