@props(['title' => 'Nothing here yet', 'message' => null, 'action' => null, 'actionLabel' => null])

<div class="flex flex-col items-center justify-center text-center py-16 px-6">
    <div class="flex h-12 w-12 items-center justify-center rounded-full bg-gray-100 dark:bg-gray-700 text-gray-400 dark:text-gray-500 mb-4">
        <svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 13h6m-3-3v6m-9 1V7a2 2 0 012-2h6l2 2h6a2 2 0 012 2v8a2 2 0 01-2 2H5a2 2 0 01-2-2z" />
        </svg>
    </div>
    <h3 class="text-sm font-semibold text-gray-800 dark:text-gray-100">{{ $title }}</h3>
    @if ($message)
        <p class="mt-1 text-sm text-gray-500 dark:text-gray-400 max-w-sm">{{ $message }}</p>
    @endif
    @if ($action && $actionLabel)
        <button
            wire:click="{{ $action }}"
            class="mt-4 inline-flex items-center px-4 py-2 bg-indigo-600 text-white text-sm font-medium rounded-lg hover:bg-indigo-700 transition"
        >
            {{ $actionLabel }}
        </button>
    @endif
</div>