@props([
    'label',
    'value',
    'icon',
    'color' => 'primary',
    'link' => null,
    'linkText' => 'View details',
    'sublabel' => null,
    'liveKey' => null,
])

<div {{ $attributes->merge(['class' => 'col']) }}>
    <div class="chm-stat-card">
        <div class="chm-stat-icon {{ $color }}">
            <i class="{{ $icon }}"></i>
        </div>
        <div class="flex-grow-1 min-w-0">
            <div class="chm-stat-label">
                {{ $label }}
                @if($sublabel)
                    <span class="text-lowercase fw-normal">({{ $sublabel }})</span>
                @endif
            </div>
            <div class="chm-stat-value" @if($liveKey) data-chm-stat="{{ $liveKey }}" @endif>{{ $value }}</div>
            @if($link)
                <a href="{{ $link }}" class="chm-stat-link">{{ $linkText }} <i class="fa-solid fa-arrow-right fa-xs"></i></a>
            @endif
        </div>
    </div>
</div>