@props(['label', 'value', 'icon', 'color' => 'var(--accent-green)', 'id' => null])

<div {{ $attributes->merge(['class' => 'stat-mini-card flex items-center gap-4']) }} @if($id) data-stat-id="{{ $id }}" @endif>
    <div class="flex-shrink-0 w-12 h-12 rounded-xl flex items-center justify-center bg-[var(--input-bg)]" style="color: {{ $color }}">
        <i class="bi {{ $icon }} text-xl"></i>
    </div>
    <div>
        <div class="stat-label mb-0.5">{{ $label }}</div>
        <div class="stat-value leading-none">{{ $value }}</div>
    </div>
</div>