@props(['icon' => 'inbox', 'title' => null, 'subtitle' => null])

{{--
    Non-table empty state (icon + title + subtext + optional CTA slot), for the
    card/list screens that can't use <x-admin.empty> (which lives inside a <tr>).
    Same visual language so every "nothing here yet" reads deliberate, not cheap.
    Pass a CTA via the `action` slot.
--}}
<div class="flex flex-col items-center justify-center gap-2 px-6 py-14 text-center">
    <span class="flex h-12 w-12 items-center justify-center rounded-full"
          style="background:var(--color-surface-2);color:var(--color-text-subtle);">
        <i data-lucide="{{ $icon }}" style="width:22px;height:22px;"></i>
    </span>
    <p class="text-sm font-medium" style="color:var(--color-text);">{{ $title ?? __('Nothing here yet') }}</p>
    @if ($subtitle)
        <p class="max-w-sm text-sm" style="color:var(--color-text-subtle);">{{ $subtitle }}</p>
    @endif
    @isset($action)
        <div class="mt-2">{{ $action }}</div>
    @endisset
</div>