<script lang="ts">
	import { page } from '$app/state';
	import { navigate, type PaginationData } from '$lib/Navigation';

	let { pagination }: { pagination: PaginationData } = $props();

	let values = $derived(
		new Set([24, 48, 72, 90, 120, 150, 180, pagination.items].sort((a, b) => a - b))
	);

	function onchange(e: Event & { currentTarget: EventTarget & HTMLSelectElement }) {
		navigate({ pagination: { items: +e.currentTarget.value } }, page.url.searchParams);
	}
</script>

<select class="btn-slate" value={pagination.items} {onchange} title="Limit displayed items to...">
	{#each values as value (value)}
		<option {value}>{value}</option>
	{/each}
</select>