@props([
    'title',
    'description' => null,
    'actionUrl' => null,
    'actionLabel' => null,
    'icon' => 'bi-inbox',
])

<div {{ $attributes->merge(['class' => 'rounded-xl border border-dashed border-slate-200 bg-slate-50/80 px-6 py-10 text-center']) }}>
    <i class="bi {{ $icon }} text-3xl text-slate-300"></i>
    <p class="mt-3 text-sm font-semibold text-slate-800">{{ $title }}</p>
    @if($description)
        <p class="mx-auto mt-1 max-w-md text-sm text-slate-500">{{ $description }}</p>
    @endif
    @if($actionUrl && $actionLabel)
        <a href="{{ $actionUrl }}" class="mt-4 inline-flex items-center gap-1.5 rounded-lg bg-primary px-4 py-2 text-sm font-medium text-white hover:bg-primary-hover">
            <i class="bi bi-plus-lg"></i> {{ $actionLabel }}
        </a>
    @endif
</div>