@props([
    'icon' => 'fa-inbox',
    'title' => 'Sin resultados',
    'description' => null,
    'ctaLabel' => null,
    'ctaUrl' => null,
])

{{-- Estado vacío reusable — usar cuando una lista/tabla no tiene items
     pero el usuario espera contenido. Ej: sin facturas, sin tickets, sin
     notificaciones. Soporta CTA opcional. --}}
<div {{ $attributes->merge(['class' => 'text-center py-8 px-3']) }}>
    <i class="fas {{ $icon }} text-gray-300 fs-5x mb-4"></i>
    <h4 class="fw-bold text-gray-700 mb-2">{{ $title }}</h4>
    @if($description)
        <p class="text-muted mb-4 mx-auto" style="max-width: 480px;">{{ $description }}</p>
    @endif
    @if($ctaLabel && $ctaUrl)
        <a href="{{ $ctaUrl }}" class="btn btn-primary">
            {{ $ctaLabel }}
        </a>
    @endif
    {{ $slot ?? '' }}
</div>