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

	interface Props {
		active?: boolean;
		disabled?: boolean;
		target: number;
		children?: Snippet;
	}

	let { active = false, disabled = false, target, children }: Props = $props();

	function onclick() {
		navigate({ pagination: { page: target } }, page.url.searchParams);
	}
</script>

<button
	{onclick}
	class:active
	class="flex h-8 w-8 items-center justify-center rounded-sm p-0 text-base font-medium hover:bg-slate-700/50 hover:text-white disabled:text-slate-600 disabled:hover:bg-inherit [&.active]:bg-slate-700 [&:not(active)]:bg-slate-800"
	{disabled}
>
	{@render children?.()}
</button>