@props([
    'title' => 'No hay registros',
    'icon' => 'fas fa-search',
    'action' => null,
    'btnText' => 'Crear Nuevo',
    'btnColor' => 'primary',
    'btnIcon' => 'fas fa-plus',
    'img' => null, // Nuevo: Opción para imagen SVG/PNG
])

<div {{ $attributes->merge(['class' => 'text-center py-5']) }}>
    <div class="mb-4 position-relative d-inline-block">
        @if($img)
            <img src="{{ $img }}" alt="Empty" style="max-height: 150px; opacity: 0.8;">
        @else
            {{-- Stacked Icons para un look más ilustrativo --}}
            <span class="fa-stack fa-4x text-muted" style="opacity: 0.2;">
                <i class="fas fa-circle fa-stack-2x"></i>
                <i class="{{ $icon }} fa-stack-1x fa-inverse"></i>
            </span>
        @endif
    </div>
    
    <h3 class="text-dark font-weight-bold mb-2">{{ $title }}</h3>
    
    @if(isset($slot) && $slot->isNotEmpty())
        <p class="text-secondary mb-4" style="font-size: 1.1rem; max-width: 500px; margin: 0 auto;">
            {{ $slot }}
        </p>
    @endif

    @if($action)
        <a href="{{ $action }}" class="btn btn-{{ $btnColor }} btn-lg shadow-sm font-weight-bold px-4 rounded-pill transition-hover" title="{{ $btnText }}">
            <i class="{{ $btnIcon }} mr-2"></i> {{ $btnText }}
        </a>
    @endif
</div>

@pushonce('css')
<style>
    .transition-hover {
        transition: transform 0.2s ease;
    }
    .transition-hover:hover {
        transform: scale(1.05);
    }
</style>
@endpushonce