<script lang="ts">
	let {
		label,
		value,
		variant = 'default'
	}: {
		label: string;
		value: string | number;
		variant?: 'default' | 'success' | 'warning' | 'danger';
	} = $props();

	const variantClasses: Record<string, string> = {
		default: 'bg-gray-100 text-gray-700',
		success: 'bg-green-100 text-green-700',
		warning: 'bg-yellow-100 text-yellow-700',
		danger: 'bg-red-100 text-red-700'
	};
</script>

<div class="flex flex-col items-center rounded-lg p-3 {variantClasses[variant] ?? variantClasses.default}">
	<span class="text-lg font-bold">{value}</span>
	<span class="mt-0.5 text-xs">{label}</span>
</div>
