{{--
    Empty State Component - shadcn-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,
])

<div 
    {{ $attributes->class([
        'flex flex-col items-center justify-center text-center',
        'py-12 px-6' => !$compact,
        'py-6 px-4' => $compact,
    ]) }}
>
    @if($icon)
        <div @class([
            'flex items-center justify-center rounded-full bg-muted',
            'mb-4 size-14' => !$compact,
            'mb-3 size-10' => $compact,
        ])>
            <x-dynamic-component 
                :component="$icon" 
                @class([
                    $iconClass ?? 'text-muted-foreground',
                    'size-7' => !$compact,
                    'size-5' => $compact,
                ])
            />
        </div>
    @endif
    
    <h3 @class([
        'font-semibold tracking-tight',
        'text-base' => !$compact,
        'text-sm' => $compact,
    ])>
        {{ $title }}
    </h3>
    
    @if($description)
        <p @class([
            'text-muted-foreground max-w-sm',
            'mt-1.5 text-sm' => !$compact,
            'mt-1 text-xs' => $compact,
        ])>
            {{ $description }}
        </p>
    @endif
    
    @if($slot->isNotEmpty())
        <div @class(['mt-4' => !$compact, 'mt-3' => $compact])>
            {{ $slot }}
        </div>
    @endif
</div>