<script lang="ts">
	import { cn } from "tailwind-variants";
	import Pagination from "#lib/components/ui/Pagination.svelte";
	import Pending from "#lib/components/ui/Pending.svelte";
	import { gotoPage } from "#lib/pagination.svelte.ts";

	interface Props {
		page: number;
		pageCount: Promise<number> | number;
		labels?: boolean;
		class?: string;
	}

	let { page: currentPage, pageCount, labels, class: className }: Props = $props();
</script>

<Pending>
	{@const count = await pageCount}
	{#if count > 1}
		<div class={cn("flex justify-center", className)}>
			<Pagination page={currentPage} total={count} {labels} onchange={gotoPage} />
		</div>
	{/if}
</Pending>