@props(['title' => null, 'description' => null])

<section {{ $attributes->merge(['class' => 'rounded-lg border border-booklio-border bg-white p-5 shadow-card']) }} data-booklio-filter-panel>
    @if ($title || $description)
        <div class="mb-4">
            @if ($title)
                <h2 class="text-base font-extrabold text-booklio-dark">{{ $title }}</h2>
            @endif
            @if ($description)
                <p class="mt-1 text-sm leading-6 text-booklio-muted">{{ $description }}</p>
            @endif
        </div>
    @endif
    <div class="booklio-filter-grid flex min-w-0 flex-wrap items-center gap-3">
        {{ $slot }}
    </div>
    <div class="mt-3 hidden flex-wrap gap-2" data-booklio-active-filters></div>
</section>