import Link from "next/link";
import { ChevronLeft, ChevronRight } from "lucide-react";
import { LISTING_PAGE_SIZE, paginationRange } from "@/lib/pageHelpers";

export function ListingPagination({ basePath, page, total }: { basePath: string; page: number; total: number }) {
  const totalPages = Math.max(1, Math.ceil(total / LISTING_PAGE_SIZE));
  if (totalPages <= 1) return null;

  const pageHref = (p: number) => (p === 1 ? basePath : `${basePath}?page=${p}`);
  const pillClass = (active: boolean) =>
    `min-w-8 h-8 px-2 inline-flex items-center justify-center rounded-full text-xs font-bold transition-colors ${active ? "bg-blue-500 text-white" : "bg-black text-white hover:bg-blue-400"
    }`;

  return (
    <nav aria-label="Pagination" className="flex items-center justify-center gap-1.5 pt-4">
      {page > 1 ? (
        <Link href={pageHref(page - 1)} aria-label="Previous page" className={pillClass(false)}>
          <ChevronLeft className="w-4 h-4" />
        </Link>
      ) : (
        <span className={`${pillClass(false)} opacity-30 pointer-events-none`}>
          <ChevronLeft className="w-4 h-4" />
        </span>
      )}

      {paginationRange(page, totalPages).map((p, i) =>
        p === null ? (
          <span key={`gap-${i}`} className="px-1 text-xs text-slate-400">
            …
          </span>
        ) : (
          <Link
            key={p}
            href={pageHref(p)}
            aria-current={p === page ? "page" : undefined}
            className={pillClass(p === page)}
          >
            {p}
          </Link>
        )
      )}

      {page < totalPages ? (
        <Link href={pageHref(page + 1)} aria-label="Next page" className={pillClass(false)}>
          <ChevronRight className="w-4 h-4" />
        </Link>
      ) : (
        <span className={`${pillClass(false)} opacity-30 pointer-events-none`}>
          <ChevronRight className="w-4 h-4" />
        </span>
      )}
    </nav>
  );
}