@props(['title', 'body' => null, 'icon' => 'M12 6.042A8.967 8.967 0 006 3.75c-1.052 0-2.062.18-3 .512v14.25A8.987 8.987 0 016 18c2.305 0 4.408.867 6 2.292m0-14.25a8.966 8.966 0 016-2.292c1.052 0 2.062.18 3 .512v14.25A8.987 8.987 0 0018 18a8.967 8.967 0 00-6 2.292m0-14.25v14.25'])

{{-- An empty screen must say why it is empty. "No sessions" and "no sessions
     because it is Eid" are different facts, and a blank panel reads as a bug. --}}
<div class="flex flex-col items-center gap-2 py-10 text-center">
    <svg class="h-10 w-10" fill="none" stroke="currentColor" stroke-width="1.3"
         viewBox="0 0 24 24" aria-hidden="true" style="color: var(--portal-muted); opacity: .6;">
        <path stroke-linecap="round" stroke-linejoin="round" d="{{ $icon }}"/>
    </svg>
    <p class="text-sm font-semibold">{{ $title }}</p>
    @if($body)
        <p class="max-w-64 text-xs leading-relaxed" style="color: var(--portal-muted);">{{ $body }}</p>
    @endif
    {{ $slot }}
</div>
