@props([
    'label',
    'value',
    'unit' => null,
    'trend' => null,
])

<div {{ $attributes->merge(['class' => 'bg-bg-soft border border-line rounded-xl p-4 shadow-sm transition-shadow hover:shadow-md']) }}>
    <div class="text-[11px] uppercase tracking-[0.1em] text-ink-3 font-semibold">{{ $label }}</div>
    <div class="text-3xl font-bold tracking-tight mt-2 font-mono tabular-nums text-ink-1">
        {{ $value }}@if($unit)<span class="text-sm text-ink-3 font-semibold ml-1 font-display">{{ $unit }}</span>@endif
    </div>
    @if($trend)
        <div class="text-xs text-green-ink font-semibold mt-1.5 flex items-center gap-1">
            <span>↑</span><span>{{ $trend }}</span>
        </div>
    @endif
</div>