@props(['title', 'value', 'icon', 'color' => 'primary', 'footer' => null, 'footerClass' => '', 'id' => null, 'description' => null])

<div class="col-xl-3 col-sm-6 mb-xl-0 mb-4">
    <div class="card">
        <div class="card-header p-2 ps-3">
            <div class="d-flex justify-content-between">
                <div>
                    <p class="text-sm mb-0 text-capitalize">{{ $title }}</p>
                    <h4 class="mb-0" @if($id) id="{{ $id }}" @endif>{!! $value !!}</h4>
                </div>
                <div class="icon icon-md icon-shape bg-gradient-{{ $color }} shadow text-center border-radius-lg">
                    <i class="material-symbols-rounded opacity-10">{{ $icon }}</i>
                </div>
            </div>
        </div>
        @if($footer || $description)
        <hr class="dark horizontal my-0">
        <div class="card-footer p-2 ps-3">
            <p class="mb-0 text-sm {{ $footerClass }}">{{ $footer ?? $description }}</p>
        </div>
        @endif
    </div>
</div>