<script lang="ts">
	import { page as pageStore } from '$app/stores';
	import { navigate } from '$lib/Navigation';

	export let active = false;

	export let disabled = false;
	export let page: number;
</script>

<button
	on:click={() => {
		navigate({ pagination: { page: page } }, $pageStore.url.searchParams);
	}}
	class:bg-slate-700={active}
	class:bg-slate-800={!active}
	class="flex h-8 w-8 items-center justify-center rounded-sm p-0 text-base hover:text-white disabled:text-slate-600"
	{disabled}
>
	<slot />
</button>