import Link from 'next/link';

export default function Pagination({
  page,
  totalPages,
  makeHref,
}: {
  page: number;
  totalPages: number;
  makeHref: (p: number) => string;
}) {
  if (totalPages <= 1) return null;

  const pages: (number | '…')[] = [];
  for (let p = 1; p <= totalPages; p++) {
    if (p === 1 || p === totalPages || Math.abs(p - page) <= 1) pages.push(p);
    else if (pages[pages.length - 1] !== '…') pages.push('…');
  }

  return (
    <nav className="mt-12 flex items-center justify-center gap-1.5">
      {page > 1 && (
        <Link href={makeHref(page - 1)} className="rounded-md border border-surface bg-surface px-3 py-2 text-sm hover:border-brand-500">
          ‹
        </Link>
      )}
      {pages.map((p, i) =>
        p === '…' ? (
          <span key={`e${i}`} className="px-2 text-sm text-muted">…</span>
        ) : (
          <Link
            key={p}
            href={makeHref(p)}
            className={
              p === page
                ? 'rounded-md border border-brand-900 bg-brand-900 px-3.5 py-2 text-sm font-semibold text-white'
                : 'rounded-md border border-surface bg-surface px-3.5 py-2 text-sm hover:border-brand-500'
            }
          >
            {p}
          </Link>
        )
      )}
      {page < totalPages && (
        <Link href={makeHref(page + 1)} className="rounded-md border border-surface bg-surface px-3 py-2 text-sm hover:border-brand-500">
          ›
        </Link>
      )}
    </nav>
  );
}