@props(['message', 'icon' => 'inbox'])
<div class="flex flex-col items-center justify-center px-6 py-12 text-center">
    <span class="flex size-12 items-center justify-center rounded-full bg-gray-100 text-gray-400 dark:bg-gray-800"><x-dynamic-component :component="'heroicon-o-'.$icon" class="size-6" /></span>
    <p class="mt-3 text-sm text-gray-500 dark:text-gray-400">{{ $message }}</p>
    {{ $slot }}
</div>