@props(['icon' => 'fa-solid fa-inbox', 'title' => 'Nothing here yet', 'subtitle' => null])

<div class="flex flex-col items-center justify-center px-6 py-16 text-center">
    <div class="mb-4 flex h-16 w-16 animate-[count-in_0.5s_var(--ease-luxury)_both] items-center justify-center rounded-full bg-gradient-to-br from-black/5 to-black/[0.02] text-2xl text-ink/30">
        <i class="{{ $icon }}"></i>
    </div>
    <p class="text-sm font-semibold text-ink/70">{{ $title }}</p>
    @if ($subtitle)
        <p class="mt-1 max-w-sm text-sm text-ink/40">{{ $subtitle }}</p>
    @endif
    @isset($action)
        <div class="mt-5">{{ $action }}</div>
    @endisset
</div>
