<script lang="ts">
	import { fade } from 'svelte/transition';

	export let page: number = 1;
	export let itemCount: number = 0;
	export let pageSize: number = 1;

	interface PagerParams {
		page: number;
		pageCount: number;
		pageSize: number;
	}

	export let createUrl: (
		//<reference types="svelte" />
		arg0: PagerParams
	) => string = (): string => '';

	$: pageCount = Math.max(1, Math.ceil(itemCount / pageSize));
</script>

<ol class="flex justify-between w-full center text-lg" style="padding: 0 10%;">
	{#if page > 1}
		<li in:fade>
			<a href={createUrl({ page: page - 1, pageCount, pageSize })}> &lt;Previous </a>
		</li>
	{:else}
		<li />
	{/if}
	<li>Page {page} of {pageCount}</li>
	{#if page < pageCount}
		<li in:fade>
			<a href={createUrl({ page: page + 1, pageCount, pageSize })}> Next&gt; </a>
		</li>
	{:else}
		<li />
	{/if}
</ol>
