@props([
    'title' => 'Nothing here yet',
    'description' => null,
    'icon' => 'M12 3a9 9 0 1 0 0 18 9 9 0 0 0 0-18Zm0 5v4m0 4h.01',
])

<div {{ $attributes->merge(['class' => 'flex flex-col items-center justify-center px-6 py-14 text-center']) }}>
    <div class="mb-4 flex h-12 w-12 items-center justify-center rounded-xl border border-line-strong bg-abyss">
        <svg class="h-6 w-6 text-silver-500" viewBox="0 0 24 24" fill="none"
             stroke="currentColor" stroke-width="1.75" stroke-linecap="round"
             stroke-linejoin="round" aria-hidden="true">
            <path d="{{ $icon }}"/>
        </svg>
    </div>

    <h3 class="font-display text-base font-semibold text-silver-100">{{ $title }}</h3>

    @if ($description)
        <p class="mt-1.5 max-w-sm text-sm text-silver-400">{{ $description }}</p>
    @endif

    @isset($action)
        <div class="mt-5">{{ $action }}</div>
    @endisset
</div>