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

<div class="card h-100 shadow-sm border-0">
    <div class="card-body d-flex justify-content-between align-items-center">
        <div>
            <p class="text-muted fw-medium mb-1">{{ $title }}</p>
            <h3 class="text-dark fw-bold mb-1">{!! $count !!}</h3>
            <small class="text-muted">{{ $subtitle }}</small>
        </div>
        <div class="badge bg-label-{{ $color }} p-2 rounded">
            <i class="ti tabler-{{ $icon }}" style="font-size: 1.8rem;"></i>
        </div>
    </div>
</div>