@props([
    'title',
    'icon' => 'fas fa-info-circle',
    'headerClass' => 'bg-primary bg-gradient',
    'items' => [],
    'totalText' => null,
    'listIcon' => 'fas fa-circle text-info fs-6',
    'itemClass' => '',
    'bodyClass' => '',
    'headerIconClass' => 'fs-3 me-2',
])

<div class="card h-100">
    <div class="card-header {{ $headerClass }}">
        <div class="d-flex align-items-center">
            <i class="{{ $icon }} {{ $headerIconClass }}"></i>
            <h4 class="mb-0 fw-semibold">{{ $title }}</h4>
        </div>
    </div>
    <div class="card-body {{ $bodyClass }}">
        @if($totalText)
            <small class="fw-bold text-muted d-block mb-3">{!! $totalText !!}</small>
        @endif

        @if(count($items))
            <ul class="list-unstyled custom-list">
                @foreach($items as $item)
                    <li class="d-flex align-items-start mb-2 {{ $itemClass }}">
                        <i class="{{ $listIcon }} me-2 mt-1"></i>
                        <span>{{ $item }}</span>
                    </li>
                @endforeach
            </ul>
        @else
            {{ $slot }}
        @endif
    </div>
</div>