@props(['label', 'value', 'icon' => 'chart', 'href' => null, 'hint' => null])
@php($classes = 'card flex items-center gap-4 p-5'.($href ? ' transition hover:border-gold-400 hover:shadow-md' : ''))
@if ($href)<a href="{{ $href }}" class="{{ $classes }}">@else<div class="{{ $classes }}">@endif
    <span class="flex size-12 shrink-0 items-center justify-center rounded-xl bg-navy-900 text-gold-300"><x-icon :name="$icon" class="size-6" /></span>
    <div class="min-w-0">
        <p class="text-sm text-gray-500">{{ $label }}</p>
        <p class="text-2xl font-bold text-navy-900">{{ $value }}</p>
        @if ($hint)<p class="text-xs text-gray-400">{{ $hint }}</p>@endif
    </div>
@if ($href)</a>@else</div>@endif