@props([
    'title' => null,
    'description' => null,
    'action' => null,
])

<div class="text-center py-12 px-4 rounded-xl border-2 border-dashed border-slate-200 bg-slate-50/50">
    <div class="mx-auto w-12 h-12 rounded-full bg-slate-100 flex items-center justify-center text-slate-400 mb-3">
        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4"></path></svg>
    </div>
    <h3 class="text-sm font-bold text-slate-800">{{ $title ?? __('app.feedback.empty_title') }}</h3>
    <p class="mt-1 text-xs text-slate-500 max-w-sm mx-auto">{{ $description ?? __('app.feedback.empty_description') }}</p>
    @if($action)
        <div class="mt-4">
            {{ $action }}
        </div>
    @endif
</div>