@props(['title', 'value', 'icon', 'color' => 'primary'])

<div {{ $attributes->merge(['class' => 'card']) }}>
    <div class="card-body">
        <div class="d-flex justify-content-between align-items-center">
            <div>
                <h6 class="text-muted mb-1">{{ $title }}</h6>
                <h2 class="mb-0 text-{{ $color }}">{{ $value }}</h2>
            </div>
            <div class="text-{{ $color }}" style="font-size: 2rem;">
                <i class="bi bi-{{ $icon }}"></i>
            </div>
        </div>
    </div>
</div>