@props(['label', 'value' => '—', 'hint' => null, 'icon' => null])
<div {{ $attributes->merge(['class' => 'group min-w-0 rounded-2xl border border-slate-200/80 bg-white p-4 sm:p-5 shadow-sm shadow-slate-900/[0.03] transition hover:-translate-y-0.5 hover:shadow-md']) }}>
    <div class="flex items-start justify-between gap-3">
        <p class="text-xs font-medium text-slate-500 sm:text-sm">{{ $label }}</p>
        @if ($icon)
            <span class="hidden h-9 w-9 shrink-0 sm:grid place-items-center rounded-xl bg-slate-100 text-slate-500 transition group-hover:bg-brand-50 group-hover:text-brand-700"><x-ui.icon :name="$icon" /></span>
        @endif
    </div>
    <p class="mt-1.5 text-lg font-semibold tracking-tight tabular-nums text-slate-900 [overflow-wrap:anywhere] sm:mt-2 sm:text-2xl xl:text-3xl">{{ $value }}</p>
    @if ($hint)
        <p class="mt-1 text-xs text-slate-500">{{ $hint }}</p>
    @endif
</div>