<script lang="ts">
	interface Props {
		count: number;
		class?: string;
	}

	let { count, class: className = '' }: Props = $props();

	let displayCount = $derived(count > 99 ? '99+' : count.toString());
	let showBadge = $derived(count > 0);
</script>

{#if showBadge}
	<span
		class="absolute -top-1 -right-1 flex h-5 min-w-5 items-center justify-center rounded-full bg-error-500 px-1 text-xs font-semibold text-white {className}"
	>
		{displayCount}
	</span>
{/if}
