{{--
    Empty State Component - AdminLTE style
    
    Usage:
    <x-proxmox::ui.empty-state title="No servers found" />
    <x-proxmox::ui.empty-state 
        title="No servers" 
        description="Get started by creating your first server."
        icon="ri-server-line"
    >
        <x-proxmox::ui.button variant="primary">Create Server</x-proxmox::ui.button>
    </x-proxmox::ui.empty-state>
--}}

@props([
    'title' => 'No data',
    'description' => null,
    'icon' => 'ri-inbox-line',
    'iconClass' => null,
    'compact' => false,
])

<style>
    .empty-state-lte {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
    }
    .empty-state-lte-regular {
        padding: 3rem 1.5rem;
    }
    .empty-state-lte-compact {
        padding: 1.5rem 1rem;
    }
    .empty-state-lte-icon {
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: #f8f9fa;
        border-radius: 50%;
    }
    .empty-state-lte-icon-regular {
        width: 4rem;
        height: 4rem;
        margin-bottom: 1.25rem;
    }
    .empty-state-lte-icon-compact {
        width: 2.75rem;
        height: 2.75rem;
        margin-bottom: 0.75rem;
    }
    .empty-state-lte-icon svg {
        color: #adb5bd;
    }
    .empty-state-lte-icon-regular svg {
        width: 2rem;
        height: 2rem;
    }
    .empty-state-lte-icon-compact svg {
        width: 1.25rem;
        height: 1.25rem;
    }
    .empty-state-lte-title {
        font-weight: 600;
        color: #212529;
    }
    .empty-state-lte-title-regular {
        font-size: 1.125rem;
    }
    .empty-state-lte-title-compact {
        font-size: 0.875rem;
    }
    .empty-state-lte-description {
        max-width: 24rem;
        color: var(--lte-secondary, #6c757d);
    }
    .empty-state-lte-description-regular {
        font-size: 0.875rem;
        margin-top: 0.5rem;
    }
    .empty-state-lte-description-compact {
        font-size: 0.8125rem;
        margin-top: 0.25rem;
    }
    .empty-state-lte-actions-regular {
        margin-top: 1.25rem;
    }
    .empty-state-lte-actions-compact {
        margin-top: 0.75rem;
    }
    /* Dark mode */
    .dark .empty-state-lte-icon {
        background-color: #374151;
    }
    .dark .empty-state-lte-icon svg {
        color: #6b7280;
    }
    .dark .empty-state-lte-title {
        color: #f3f4f6;
    }
    .dark .empty-state-lte-description {
        color: #9ca3af;
    }
</style>

<div 
    {{ $attributes->class([
        'empty-state-lte',
        'empty-state-lte-regular' => !$compact,
        'empty-state-lte-compact' => $compact,
    ]) }}
>
    @if($icon)
        <div class="empty-state-lte-icon {{ $compact ? 'empty-state-lte-icon-compact' : 'empty-state-lte-icon-regular' }}">
            <x-dynamic-component 
                :component="$icon" 
                class="{{ $iconClass ?? '' }}"
            />
        </div>
    @endif
    
    <h3 class="empty-state-lte-title {{ $compact ? 'empty-state-lte-title-compact' : 'empty-state-lte-title-regular' }}">
        {{ $title }}
    </h3>
    
    @if($description)
        <p class="empty-state-lte-description {{ $compact ? 'empty-state-lte-description-compact' : 'empty-state-lte-description-regular' }}">
            {{ $description }}
        </p>
    @endif
    
    @if($slot->isNotEmpty())
        <div class="{{ $compact ? 'empty-state-lte-actions-compact' : 'empty-state-lte-actions-regular' }}">
            {{ $slot }}
        </div>
    @endif
</div>