{{--
    Empty State Component
    Props:
      $message     – main message
      $description – optional sub-text
      $action      – optional slot for CTA button
--}}
@props([
    'message'     => 'No results found.',
    'description' => 'Try adjusting your search or filter to find what you are looking for.',
])

<div class="flex flex-col items-center justify-center py-16 px-4 text-center">
    <div class="h-16 w-16 rounded-2xl bg-surface-100 dark:bg-surface-800 flex items-center justify-center mb-4">
        <svg class="h-8 w-8 text-surface-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
                  d="M9.172 16.172a4 4 0 015.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
        </svg>
    </div>
    <h3 class="text-base font-semibold text-surface-900 dark:text-surface-100 mb-1">{{ $message }}</h3>
    <p class="text-sm text-surface-500 dark:text-surface-400 max-w-sm">{{ $description }}</p>
    @if(isset($action))
        <div class="mt-4">{{ $action }}</div>
    @endif
</div>