@props([
    'label' => '',
    'value' => null,
    'description' => null,
    'icon' => 'activity',
    'tint' => 'primary',
])

@php
    $tints = [
        'primary' => 'bg-primary-dim text-primary',
        'success' => 'bg-success-dim text-success',
        'warning' => 'bg-warning-dim text-warning',
        'info' => 'bg-info-dim text-info',
    ];

    $iconWrapper = $tints[$tint] ?? $tints['primary'];
@endphp

<div {{ $attributes->merge(['class' => 'sms-metric card border-0 shadow-sm']) }}>
    <div class="card-body d-flex align-items-start gap-3">
        <div class="sms-metric__icon icon-circle {{ $iconWrapper }} flex-shrink-0">
            <em class="icon ni ni-{{ $icon }}"></em>
        </div>
        <div class="sms-metric__content flex-grow-1">
            @if($label)
                <p class="sms-metric__label text-uppercase fw-semibold mb-1">{{ $label }}</p>
            @endif
            <p class="sms-metric__value fw-bold mb-1">{{ $value ?? '0' }}</p>
            @if($description)
                <p class="sms-metric__description mb-0">{{ $description }}</p>
            @endif
        </div>
    </div>
</div>