@props([
    'icon' => 'search',
    'title' => 'No results found',
    'description' => 'Try changing your filters or search term.',
    'action' => null,
])

<div {{ $attributes->merge(['class' => 'rounded-lg border border-dashed border-booklio-border bg-white p-8 text-center shadow-card']) }}>
    <span class="mx-auto flex h-14 w-14 items-center justify-center rounded-xl bg-blue-50 text-booklio-primary">
        <x-ui.icon :name="$icon" class="h-7 w-7" />
    </span>
    <h3 class="mt-4 text-base font-extrabold text-booklio-dark">{{ $title }}</h3>
    <p class="mx-auto mt-2 max-w-md text-sm leading-6 text-booklio-muted">{{ $description }}</p>
    @if ($action)
        <div class="mt-5">{{ $action }}</div>
    @endif
</div>