---
// @design-system: primitives/PaginationLinks
// SSR `<a>`-based numbered pagination. Sibling of callback-based Pagination.tsx.
import { getPageNumbers } from './getPageNumbers';
import { ChevronLeft, ChevronRight } from 'lucide-react';

interface Props {
  page: number;
  totalPages: number;
  buildHref: (page: number) => string;
  ariaLabel: string;
  prevLabel: string;
  nextLabel: string;
  dir?: 'rtl' | 'ltr';
}

const {
  page,
  totalPages,
  buildHref,
  ariaLabel,
  prevLabel,
  nextLabel,
  dir = 'ltr',
} = Astro.props as Props;
const pages = getPageNumbers(page, totalPages);
const PrevIcon = dir === 'rtl' ? ChevronRight : ChevronLeft;
const NextIcon = dir === 'rtl' ? ChevronLeft : ChevronRight;
const hasPrev = page > 1;
const hasNext = page < totalPages;
---

<nav
  aria-label={ariaLabel}
  class="flex items-center justify-center gap-1 py-6"
  data-testid="pagination"
>
  {
    hasPrev ? (
      <a
        href={buildHref(page - 1)}
        class="border-border-default text-text-primary hover:bg-surface-inset focus-visible:outline-brand-primary-500 inline-flex h-9 items-center gap-1 rounded-md border px-3 text-sm font-medium focus-visible:outline-2"
        rel="prev"
        aria-label={prevLabel}
      >
        <PrevIcon className="h-4 w-4" />
        <span class="hidden sm:inline">{prevLabel}</span>
      </a>
    ) : (
      <span
        class="border-border-subtle text-text-muted inline-flex h-9 items-center gap-1 rounded-md border px-3 text-sm"
        aria-hidden="true"
      >
        <PrevIcon className="h-4 w-4" />
        <span class="hidden sm:inline">{prevLabel}</span>
      </span>
    )
  }

  {
    pages.map((p) =>
      p === 'ellipsis' ? (
        <span
          class="text-text-muted inline-flex h-9 w-9 items-center justify-center text-sm"
          aria-hidden="true"
        >
          …
        </span>
      ) : p === page ? (
        <span
          class="bg-brand-primary-500 text-text-on-brand inline-flex h-9 min-w-9 items-center justify-center rounded-md px-3 text-sm font-semibold"
          aria-current="page"
        >
          {p}
        </span>
      ) : (
        <a
          href={buildHref(p)}
          class="border-border-default text-text-primary hover:bg-surface-inset focus-visible:outline-brand-primary-500 inline-flex h-9 min-w-9 items-center justify-center rounded-md border px-3 text-sm font-medium focus-visible:outline-2"
        >
          {p}
        </a>
      ),
    )
  }

  {
    hasNext ? (
      <a
        href={buildHref(page + 1)}
        class="border-border-default text-text-primary hover:bg-surface-inset focus-visible:outline-brand-primary-500 inline-flex h-9 items-center gap-1 rounded-md border px-3 text-sm font-medium focus-visible:outline-2"
        rel="next"
        aria-label={nextLabel}
      >
        <span class="hidden sm:inline">{nextLabel}</span>
        <NextIcon className="h-4 w-4" />
      </a>
    ) : (
      <span
        class="border-border-subtle text-text-muted inline-flex h-9 items-center gap-1 rounded-md border px-3 text-sm"
        aria-hidden="true"
      >
        <span class="hidden sm:inline">{nextLabel}</span>
        <NextIcon className="h-4 w-4" />
      </span>
    )
  }
</nav>