@props(['icon', 'label', 'value', 'tint' => '#7c3aed', 'sub' => null])
<div class="admin-card p-4">
    <div class="flex items-center gap-2.5">
        <span class="grid h-11 w-11 place-items-center rounded-xl" style="background: {{ $tint }}22; color: {{ $tint }}">
            <x-dynamic-component :component="'lucide-'.$icon" class="h-5 w-5" />
        </span>
        <span class="text-xs font-medium text-slate-400">{{ $label }}</span>
    </div>
    <div class="mt-3 text-2xl font-bold text-white">{{ $value }}</div>
    @if ($sub)
        <div class="mt-1 text-xs text-slate-500">{{ $sub }}</div>
    @endif
</div>