<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 backdrop-blur-sm px-4 py-4 rounded-2xl border border-white/50 shadow-sm flex-1 text-center"
>
	<p
		class="text-4xl font-triodion font-black text-orange-500 leading-none tabular-nums"
	>
		{streak}
	</p>
	<p
		class="text-xs uppercase tracking-[0.2em] text-gray-500 font-bold mt-1 leading-tight"
	>
		day{streak === 1 ? "" : "s"}<br />in a row
	</p>
	{#if streakPercentile !== null && streakPercentile <= 50}
		<p class="text-xs text-gray-700 font-semibold mt-2">
			Top {streakPercentile}%
		</p>
	{/if}
</div>
