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

<div {{ $attributes->merge(['class' => 'flex flex-col items-center justify-center py-12 px-6 text-center']) }}>
    <div class="flex items-center justify-center w-20 h-20 rounded-2xl bg-neutral/10 mb-4">
        <x-dynamic-component :component="$icon" class="{{ $iconClass }} text-base/40" />
    </div>
    
    <h3 class="text-lg font-semibold text-base/80 mb-1">{{ $title }}</h3>
    
    @if($description)
        <p class="text-sm text-base/60 max-w-sm">{{ $description }}</p>
    @endif
    
    @if($slot->isNotEmpty())
        <div class="mt-4">
            {{ $slot }}
        </div>
    @endif
</div>