{{-- resources/views/components/stats-card.blade.php --}}
@props([
    // أيقونة FontAwesome، مثال: "fas fa-users"
    'icon',

    // عنوان البطاقة
    'title',

    // وصف البطاقة
    'description',
    // القيمة المراد عرضها
    'value',

    // لون البطاقة: primary, success, info, warning, danger (افتراضي 'primary')
    'color' => 'primary',
])

<div class="col-md-3 stretch-card grid-margin">
    <div class="card bg-gradient-{{ $color ?? 'primary' }} card-img-holder text-white">
        <div class="card-body">
            <img src="{{ asset('assets/images/dashboard/circle.svg') }}" class="card-img-absolute" alt="circle-image" />
            <h4 class="font-weight-normal mb-2">{{ $title ?? 'Title' }} <i
                    class="fa {{ $icon ?? 'fa fa-ravelry' }} mdi-24px float-end"></i>
            </h4>
            <h2 class="mb-3">{{ $value ?? ($count ?? '0') }}</h2>
            <h6 class="card-text">{{ $description ?? 'Description' }}</h6>
        </div>
    </div>
</div>