{{--
    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,
    ]) }}
    x-data="{ loaded: false }"
    x-init="setTimeout(() => loaded = true, 100)"
    :class="loaded ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-4'"
    style="transition: all 0.5s ease-out;"
>
    @if($icon)
        <div class="empty-state-lte-icon {{ $compact ? 'empty-state-lte-icon-compact' : 'empty-state-lte-icon-regular' }} transition-transform duration-300 hover:scale-110"
             :class="loaded ? 'scale-100' : 'scale-90'"
             style="transition: transform 0.5s ease-out 0.1s;">
            <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' }}"
        :class="loaded ? 'opacity-100' : 'opacity-0'"
        style="transition: opacity 0.4s ease-out 0.15s;">
        {{ $title }}
    </h3>
    
    @if($description)
        <p class="empty-state-lte-description {{ $compact ? 'empty-state-lte-description-compact' : 'empty-state-lte-description-regular' }}"
           :class="loaded ? 'opacity-100' : 'opacity-0'"
           style="transition: opacity 0.4s ease-out 0.25s;">
            {{ $description }}
        </p>
    @endif
    
    @if($slot->isNotEmpty())
        <div class="{{ $compact ? 'empty-state-lte-actions-compact' : 'empty-state-lte-actions-regular' }}"
             :class="loaded ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-2'"
             style="transition: all 0.4s ease-out 0.35s;">
            {{ $slot }}
        </div>
    @endif
</div>