@props(['title' => 'Không có dữ liệu', 'message' => 'Không tìm thấy dữ liệu nào phù hợp với yêu cầu.', 'actionText' => '', 'actionId' => ''])

<div class="flex flex-col items-center justify-center p-8 bg-white border border-slate-100 rounded-2xl shadow-sm text-center max-w-lg mx-auto my-6">
    <div class="w-48 h-48 mb-6 flex items-center justify-center text-slate-300">
        <!-- SVG illustration of empty search/mailbox -->
        <svg class="w-32 h-32 text-slate-300 animate-pulse" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
            <path stroke-linecap="round" stroke-linejoin="round" d="M20.25 7.5l-.625 10.632a2.25 2.25 0 01-2.247 2.118H6.622a2.25 2.25 0 01-2.247-2.118L3.75 7.5m6 4.125l2.25 2.25m0 0l2.25 2.25M12 13.875l2.25-2.25M12 13.875l-2.25-2.25M3.375 7.5h17.25c.621 0 1.125-.504 1.125-1.125v-1.5c0-.621-.504-1.125-1.125-1.125H3.375c-.621 0-1.125.504-1.125 1.125v1.5c0 .621.504 1.125 1.125 1.125z" />
        </svg>
    </div>
    <h3 class="text-lg font-bold text-slate-800 mb-2">{{ $title }}</h3>
    <p class="text-sm text-slate-500 max-w-sm mb-6 leading-relaxed">{{ $message }}</p>
    @if($actionText)
        <button type="button" @if($actionId) id="{{ $actionId }}" @endif class="btn-primary px-6 py-2 text-sm font-semibold rounded-lg shadow-sm cursor-pointer transition-all duration-200">
            {{ $actionText }}
        </button>
    @endif
</div>