@props([
    'icon' => 'folder',
    'title',
    'description' => null,
    'actionLabel' => null,
    'actionHref' => null,
])

<div {{ $attributes->merge(['class' => 'flex flex-col items-center gap-3 rounded-xl border border-dashed border-brand-border bg-brand-surface px-6 py-14 text-center']) }}>
    <span class="flex h-12 w-12 items-center justify-center rounded-full bg-brand-primary/10 text-brand-primary">
        <x-icon :name="$icon" class="h-6 w-6" />
    </span>
    <p class="text-base font-semibold text-brand-ink">{{ $title }}</p>
    @if ($description)
        <p class="max-w-sm text-sm text-brand-muted">{{ $description }}</p>
    @endif
    @if ($actionLabel && $actionHref)
        <a href="{{ $actionHref }}" class="btn btn-primary btn-sm mt-1">
            <x-icon name="plus" class="h-4 w-4" /> {{ $actionLabel }}
        </a>
    @endif
</div>
