<script lang="ts">
import * as m from '$lib/paraglide/messages.js';

interface Props {
	/** 0-indexed current page. */
	page: number;
	/** Total number of pages. `0` or `1` hides the control as trivially there's nothing to navigate. */
	totalPages: number;
	/** Given a 0-indexed page number, returns the href the link should point at. */
	makeHref: (page: number) => string;
	/** Optional override for the outer `<nav>`'s aria-label. */
	ariaLabel?: string;
}

const { page, totalPages, makeHref, ariaLabel }: Props = $props();

const hasPrev = $derived(page > 0);
const hasNext = $derived(page < totalPages - 1);
const linkBase =
	'inline-flex min-h-[44px] min-w-[44px] items-center justify-center gap-1.5 rounded-sm border border-line bg-white px-4 py-2 font-sans text-sm font-bold text-ink transition-colors hover:bg-surface focus-visible:ring-2 focus-visible:ring-brand-navy focus-visible:ring-offset-2 focus-visible:outline-none aria-disabled:pointer-events-none aria-disabled:cursor-not-allowed aria-disabled:opacity-40';
</script>

{#if totalPages > 1}
	<nav
		aria-label={ariaLabel ?? m.pagination_nav_label()}
		class="mt-6 flex flex-col items-center gap-3 sm:flex-row sm:justify-between"
	>
		<a
			data-testid="pagination-prev"
			aria-label={m.pagination_prev()}
			aria-disabled={!hasPrev}
			href={hasPrev ? makeHref(page - 1) : undefined}
			class={linkBase}
		>
			<span aria-hidden="true">«</span>
			{m.pagination_prev()}
		</a>

		<span
			data-testid="pagination-page-label"
			aria-current="page"
			class="font-sans text-sm text-ink-2"
		>
			{m.pagination_page_of({ page: page + 1, total: totalPages })}
		</span>

		<a
			data-testid="pagination-next"
			aria-label={m.pagination_next()}
			aria-disabled={!hasNext}
			href={hasNext ? makeHref(page + 1) : undefined}
			class={linkBase}
		>
			{m.pagination_next()}
			<span aria-hidden="true">»</span>
		</a>
	</nav>
{/if}
