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

{{--
    3-part empty state (icon + title + subtext), rendered inside a table row so
    it spans the full grid. Never a bare "No data" — that reads as a cheap script.
--}}
<tr>
    <td colspan="{{ $colspan }}" class="!bg-transparent">
        <div class="flex flex-col items-center justify-center gap-2 py-12 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="text-sm" style="color:var(--color-text-subtle);">{{ $subtitle }}</p>
            @endif
            @isset($action)
                <div class="mt-2">{{ $action }}</div>
            @endisset
        </div>
    </td>
</tr>