@props([
    'icon' => 'search',
    'title' => null,
    'message' => null,
])

<div {{ $attributes->merge(['class' => 'rounded-2xl border border-dashed border-border bg-surface px-6 py-16 text-center']) }}>
    <span class="mx-auto mb-4 flex size-12 items-center justify-center rounded-full bg-surface-muted text-text-muted">
        <x-icon :name="$icon" class="size-5" />
    </span>

    <p class="font-display text-lg font-semibold text-text">{{ $title ?? __('Nothing here yet') }}</p>

    @if ($message)
        <p class="mx-auto mt-2 max-w-md text-sm text-text-secondary">{{ $message }}</p>
    @endif

    {{ $slot }}
</div>