{{--
    Empty State Component - LucentUI Theme
    Migrated from AdminLTE to Tailwind
    
    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,
])

<div 
    {{ $attributes->class([
        'flex flex-col items-center justify-center text-center',
        'py-12 px-6' => !$compact,
        'py-6 px-4' => $compact,
    ]) }}
    x-data="{ loaded: false }"
    x-init="setTimeout(() => loaded = true, 100)"
    :class="loaded ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-4'"
    class="transition-all duration-500 ease-out"
>
    @if($icon)
        <div class="flex items-center justify-center bg-background-secondary rounded-full transition-transform duration-300 hover:scale-110 empty-state-float {{ $compact ? 'size-11 mb-3' : 'size-16 mb-5' }}"
             :class="loaded ? 'scale-100' : 'scale-90'"
             style="transition: transform 0.5s ease-out 0.1s;">
            <x-dynamic-component 
                :component="$icon" 
                class="text-base/50 {{ $iconClass ?? ($compact ? 'size-5' : 'size-8') }}"
            />
        </div>
    @endif
    
    <h3 class="font-semibold text-base {{ $compact ? 'text-sm' : 'text-lg' }}"
        :class="loaded ? 'opacity-100' : 'opacity-0'"
        style="transition: opacity 0.4s ease-out 0.15s;">
        {{ $title }}
    </h3>
    
    @if($description)
        <p class="max-w-sm text-base/60 {{ $compact ? 'text-xs mt-1' : 'text-sm mt-2' }}"
           :class="loaded ? 'opacity-100' : 'opacity-0'"
           style="transition: opacity 0.4s ease-out 0.25s;">
            {{ $description }}
        </p>
    @endif
    
    @if($slot->isNotEmpty())
        <div class="{{ $compact ? 'mt-3' : 'mt-5' }}"
             :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>