<script lang="ts">
	interface Props {
		count: number;
		size?: 'sm' | 'md' | 'lg';
		variant?: 'default' | 'dot';
	}

	let { count, size = 'sm', variant = 'default' }: Props = $props();

	function formatCount(n: number): string {
		if (n <= 0) return '';
		if (n > 99) return '99+';
		return n.toString();
	}

	let sizeClasses = $derived(() => {
		switch (size) {
			case 'sm':
				return variant === 'dot' ? 'h-2 w-2' : 'min-w-[1.25rem] h-5 px-1.5 text-xs';
			case 'md':
				return variant === 'dot' ? 'h-2.5 w-2.5' : 'min-w-[1.5rem] h-6 px-2 text-sm';
			case 'lg':
				return variant === 'dot' ? 'h-3 w-3' : 'min-w-[1.75rem] h-7 px-2.5 text-base';
			default:
				return variant === 'dot' ? 'h-2 w-2' : 'min-w-[1.25rem] h-5 px-1.5 text-xs';
		}
	});
</script>

{#if count > 0}
	{#if variant === 'dot'}
		<span
			class="inline-block rounded-full bg-accent-500 {sizeClasses()}"
			aria-label="{count} unread"
		></span>
	{:else}
		<span
			class="inline-flex items-center justify-center rounded-full bg-accent-500 font-semibold text-white {sizeClasses()}"
		>
			{formatCount(count)}
		</span>
	{/if}
{/if}
