<script lang="ts">
	let { title, value, subtitle = '' }: { title: string; value: string | number; subtitle?: string } = $props();
</script>

<div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
	<dt class="text-sm font-medium text-gray-500 truncate">{title}</dt>
	<dd class="mt-1 text-3xl font-bold text-gray-900">{value.toLocaleString('de-DE')}</dd>
	{#if subtitle}
		<dd class="mt-1 text-sm text-gray-500">{subtitle}</dd>
	{/if}
</div>
