<script lang="ts">
	let { label, value, detail = '' }: { label: string; value: string; detail?: string } = $props();
</script>

<div class="tile card">
	<div class="label">{label}</div>
	<div class="value">{value}</div>
	{#if detail}<div class="detail">{detail}</div>{/if}
</div>

<style>
	.tile {
		padding: 1rem 1.15rem;
	}
	.label {
		font-size: 0.8rem;
		font-weight: 500;
		color: var(--text-secondary);
	}
	.value {
		font-size: 1.55rem;
		font-weight: 600;
		letter-spacing: -0.02em;
		margin-top: 0.15rem;
	}
	.detail {
		font-size: 0.8rem;
		color: var(--text-muted);
		margin-top: 0.15rem;
	}
</style>
