@props(['icon' => 'inbox', 'title' => 'কিছু নেই', 'message' => null])

<div {{ $attributes->merge(['class' => 'flex flex-col items-center justify-center rounded-2xl border border-line bg-surface px-6 py-10 text-center']) }}>
    <span class="flex h-14 w-14 items-center justify-center rounded-full border border-panel-border bg-panel text-ink-muted" aria-hidden="true">
        <x-icon :name="$icon" class="h-7 w-7"/>
    </span>

    <p class="mt-3 text-base font-bold">{{ $title }}</p>

    @if ($message)
        <p class="mt-1 max-w-xs text-sm leading-relaxed text-ink-muted">{{ $message }}</p>
    @endif

    {{ $slot }}
</div>