@props([
    'label',
    'value',
    'icon' => 'activity',
    'variant' => 'primary',
    'loading' => false,
])

<div {{ $attributes->merge(['class' => 'card analytics-stat-card analytics-stat-card--'.$variant]) }}>
    <div class="card-body d-flex justify-content-between align-items-center py-1 px-1">
        <div class="analytics-stat-card__content">
            @if($loading)
                <div class="analytics-skeleton analytics-skeleton--value mb-50"></div>
                <div class="analytics-skeleton analytics-skeleton--label"></div>
            @else
                <h3 class="analytics-stat-card__value mb-25">{{ $value }}</h3>
                <p class="analytics-stat-card__label mb-0">{{ $label }}</p>
            @endif
        </div>
        <div class="avatar bg-light-{{ $variant }} p-50 m-0">
            <div class="avatar-content">
                <i data-feather="{{ $icon }}" class="font-medium-4"></i>
            </div>
        </div>
    </div>
</div>