<script lang="ts">
	import { resolve } from "$app/paths";
	import type { Component } from "svelte";
	import type { SvelteHTMLElements } from "svelte/elements";

	interface Props {
		title: string;
		href: string;
		icon: Component<SvelteHTMLElements["svg"]>;
		count?: number;
		approximate?: boolean;
	}

	let { title, href, icon, count, approximate = false }: Props = $props();
	const Glyph = $derived(icon);
</script>

<a
	href={resolve(href as "/")}
	class="flex items-center gap-2 pb-2 font-medium text-foreground-default no-underline hover:text-foreground-muted hover:no-underline"
>
	<Glyph class="size-4 shrink-0" aria-hidden="true" />
	{title}
	{#if count !== undefined}
		<span class="rounded-sm bg-background-inset px-1 mt-px typography-paragraph-small">
			{approximate && count > 0 ? `${count}+` : count}
		</span>
	{/if}
</a>
