@props(['label', 'value', 'icon' => null, 'trend' => null, 'color' => 'brand', 'href' => null])
@php $tag = $href ? 'a' : 'div'; @endphp
<{{ $tag }} @if($href) href="{{ $href }}" @endif {{ $attributes->merge(['class' => 'group block bg-white rounded-2xl p-5 shadow-[0_1px_3px_rgba(15,23,42,0.04),0_8px_24px_-12px_rgba(15,23,42,0.10)] transition hover:-translate-y-0.5 hover:shadow-[0_2px_6px_rgba(15,23,42,0.06),0_16px_32px_-16px_rgba(124,58,237,0.25)]']) }}>
    <div class="flex items-start justify-between gap-3">
        <div class="min-w-0">
            <p class="text-[13px] font-medium text-slate-400 truncate">{{ $label }}</p>
            <p class="text-[26px] font-bold text-slate-900 mt-1.5 tracking-tight leading-none">{{ $value }}</p>
            @if($trend)<p class="text-xs mt-2 font-semibold {{ str_starts_with($trend,'-') ? 'text-rose-500' : 'text-emerald-500' }}">{{ $trend }}</p>@endif
        </div>
        @if($icon)
            <span class="grid place-items-center h-11 w-11 rounded-2xl bg-brand-50 text-brand-600 text-xl shrink-0 transition group-hover:scale-105">{{ $icon }}</span>
        @endif
    </div>
</{{ $tag }}>