@props([
    'label',
    'value',
    'icon' => 'fe fe-activity',
    'href' => null,
])

@php
    $tag = $href ? 'a' : 'div';
@endphp

<div class="col-sm-6 col-xl-3">
    <{{ $tag }} @if ($href) href="{{ $href }}" @endif
        class="card border-0 shadow-sm h-100 text-decoration-none text-reset">
        <div class="card-body d-flex align-items-center gap-3">
            <span
                class="avatar avatar-md rounded d-inline-flex align-items-center justify-content-center flex-shrink-0"
                style="background: {{ config('theme.gradients.primary') }};">
                <i class="{{ $icon }} text-white fs-20"></i>
            </span>
            <div class="min-w-0">
                <div class="text-muted small text-truncate">{{ $label }}</div>
                <div class="fs-4 fw-semibold" style="color: {{ config('theme.colors.text') }};">{{ $value }}</div>
            </div>
        </div>
    </{{ $tag }}>
</div>
