<script lang="ts">
	let {
		streak,
		streakPercentile = null,
	}: {
		streak: number;
		streakPercentile?: number | null;
	} = $props();
</script>

<div
	class="flex flex-col items-center justify-center bg-white/50 dark:bg-black/30 backdrop-blur-sm px-4 py-4 rounded-2xl border border-white/50 dark:border-white/10 shadow-sm flex-1 text-center"
>
	<p
		class="text-5xl font-triodion font-black text-orange-500 leading-none tabular-nums"
	>
		{streak}
	</p>
	<p
		class="text-xs uppercase justify-center tracking-widest text-gray-500 dark:text-gray-200 font-triodion font-bold py-2 leading-tight"
	>
		day{streak === 1 ? "" : "s"} in a row
	</p>
	{#if streakPercentile !== null && streakPercentile <= 50}
		<p
			class="text-xs text-black dark:text-gray-200 w-full tracking-widest uppercase font-semibold border-t border-t-stone-400 dark:border-t-stone-600 pt-2"
		>
			Top {streakPercentile}%
		</p>
	{/if}
</div>
