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

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

	let { title, href, icon, count, approximate = false, compact = false }: Props = $props();
	const Glyph = $derived(icon);
	const formattedCount = $derived(
		count === undefined
			? undefined
			: approximate && count > 0
				? `${formatCount(count)}+`
				: formatCount(count)
	);
</script>

{#if compact}
	<a
		href={resolve(href as "/")}
		aria-label={title}
		class="hit-area-3 inline-flex items-center gap-2xs typography-paragraph-small font-bold text-foreground-default no-underline hover:underline"
	>
		<Glyph class="size-3.5 shrink-0" aria-hidden="true" />
		{formattedCount}
	</a>
{:else}
	<span class="flex items-center gap-xs font-medium text-foreground-default">
		<Glyph class="size-3.5 shrink-0" aria-hidden="true" />
		<span class="group-hover:underline">{title}</span>
		{#if count !== undefined}
			<span class="mt-px rounded-md bg-background-inset px-2xs typography-paragraph-small">
				{formattedCount}
			</span>
		{/if}
	</span>
{/if}