<script lang="ts">
	import Container from "$lib/components/Container.svelte";

	interface Props {
		emoji: string;
		value: string;
		label: string;
		colorClass: string;
		suffix?: string;
	}

	let { emoji, value, label, colorClass, suffix }: Props = $props();
</script>

<Container class="p-4 md:p-6 w-full">
	<div class="text-center w-full">
		<div class="text-2xl md:text-3xl mb-1">{emoji}</div>
		<div class="text-2xl md:text-3xl font-bold {colorClass} mb-1">
			{value}{#if suffix}<span class="text-base font-normal text-gray-400"
				>&nbsp;{suffix}</span
			>{/if}
		</div>
		<div class="text-xs md:text-sm text-gray-300 font-medium">{label}</div>
	</div>
</Container>
