<script lang="ts">
	import { page } from '$app/state';
	import { accelerator, type Shortcut } from '$lib/Shortcuts';
	import type { Snippet } from 'svelte';
	import type { HTMLAnchorAttributes } from 'svelte/elements';

	interface Props extends Pick<HTMLAnchorAttributes, 'title' | 'target'> {
		href: string;
		accel: Shortcut;
		matchExact?: boolean;
		children?: Snippet;
	}

	let { href, title, accel, matchExact = false, target, children }: Props = $props();

	let active = $derived.by(() => {
		if (matchExact) {
			return page.url.pathname === href;
		} else {
			return page.url.pathname.startsWith(href);
		}
	});
</script>

<li class:active class="items-center hover:bg-slate-600 [&.active]:bg-indigo-700">
	<a
		class="flex items-center focus-visible:bg-slate-600 focus-visible:outline-hidden"
		{target}
		{title}
		{href}
		use:accelerator={accel}
	>
		<div class="flex p-3">
			{@render children?.()}
		</div>
	</a>
</li>