@props([
    'icon' => 'inbox',
    'title' => 'No hay datos',
    'description' => 'No se encontraron elementos.',
    'action' => null,
    'actionText' => null,
    'actionIcon' => 'plus-circle'
])

<div class="empty-state-container text-center py-5">
    <div class="empty-state-icon mb-4">
        @if($icon === 'inbox')
        <svg xmlns="http://www.w3.org/2000/svg" width="120" height="120" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="empty-icon">
            <polyline points="22 12 16 12 14 15 10 15 8 12 2 12"></polyline>
            <path d="M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z"></path>
        </svg>
        @elseif($icon === 'ticket')
        <svg xmlns="http://www.w3.org/2000/svg" width="120" height="120" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="empty-icon">
            <path d="M2 9a3 3 0 0 1 0 6v2a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-2a3 3 0 0 1 0-6V7a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2Z"></path>
            <path d="M13 5v2"></path>
            <path d="M13 17v2"></path>
            <path d="M13 11v2"></path>
        </svg>
        @elseif($icon === 'folder')
        <svg xmlns="http://www.w3.org/2000/svg" width="120" height="120" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="empty-icon">
            <path d="M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z"></path>
        </svg>
        @elseif($icon === 'users')
        <svg xmlns="http://www.w3.org/2000/svg" width="120" height="120" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="empty-icon">
            <path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"></path>
            <circle cx="9" cy="7" r="4"></circle>
            <path d="M22 21v-2a4 4 0 0 0-3-3.87"></path>
            <path d="M16 3.13a4 4 0 0 1 0 7.75"></path>
        </svg>
        @elseif($icon === 'search')
        <svg xmlns="http://www.w3.org/2000/svg" width="120" height="120" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="empty-icon">
            <circle cx="11" cy="11" r="8"></circle>
            <path d="m21 21-4.3-4.3"></path>
        </svg>
        @elseif($icon === 'building')
        <svg xmlns="http://www.w3.org/2000/svg" width="120" height="120" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="empty-icon">
            <rect width="16" height="20" x="4" y="2" rx="2" ry="2"></rect>
            <path d="M9 22v-4h6v4"></path>
            <path d="M8 6h.01"></path>
            <path d="M16 6h.01"></path>
            <path d="M12 6h.01"></path>
            <path d="M12 10h.01"></path>
            <path d="M12 14h.01"></path>
            <path d="M16 10h.01"></path>
            <path d="M16 14h.01"></path>
            <path d="M8 10h.01"></path>
            <path d="M8 14h.01"></path>
        </svg>
        @elseif($icon === 'bell')
        <svg xmlns="http://www.w3.org/2000/svg" width="120" height="120" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="empty-icon">
            <path d="M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9"></path>
            <path d="M10.3 21a1.94 1.94 0 0 0 3.4 0"></path>
        </svg>
        @else
        <i class="bi bi-{{ $icon }} empty-icon-fallback"></i>
        @endif
    </div>
    
    <h4 class="empty-state-title">{{ $title }}</h4>
    <p class="empty-state-description text-muted">{{ $description }}</p>
    
    @if($action && $actionText)
    <div class="mt-4">
        <a href="{{ $action }}" class="btn btn-primary btn-lg">
            <i class="bi bi-{{ $actionIcon }} me-2"></i>{{ $actionText }}
        </a>
    </div>
    @endif
</div>

<style>
    .empty-state-container {
        padding: 60px 20px;
        max-width: 500px;
        margin: 0 auto;
    }
    
    .empty-state-icon {
        display: flex;
        justify-content: center;
        align-items: center;
        animation: float 3s ease-in-out infinite;
    }
    
    .empty-icon {
        color: #d1d5db;
        opacity: 0.6;
    }
    
    .empty-icon-fallback {
        font-size: 120px;
        color: #d1d5db;
        opacity: 0.6;
    }
    
    .empty-state-title {
        font-size: 1.5rem;
        font-weight: 600;
        color: #374151;
        margin-bottom: 12px;
    }
    
    .empty-state-description {
        font-size: 1rem;
        color: #6b7280;
        line-height: 1.6;
    }
    
    @keyframes float {
        0%, 100% {
            transform: translateY(0px);
        }
        50% {
            transform: translateY(-10px);
        }
    }
    
    @media (max-width: 768px) {
        .empty-state-container {
            padding: 40px 20px;
        }
        
        .empty-icon,
        .empty-icon-fallback {
            width: 80px;
            height: 80px;
            font-size: 80px;
        }
        
        .empty-state-title {
            font-size: 1.25rem;
        }
        
        .empty-state-description {
            font-size: 0.9rem;
        }
    }
</style>