@props([
    'title' => null,
    'description' => null,
    'action' => null,
    'padding' => 'p-5',
])

<section {{ $attributes->merge(['class' => "rounded-lg border border-booklio-border bg-white {$padding} shadow-card"]) }}>
    @if ($title || $action)
        <div class="mb-4 flex items-start justify-between gap-4">
            <div>
                @if ($title)
                    <h2 class="text-base font-bold text-booklio-dark">{{ $title }}</h2>
                @endif
                @if ($description)
                    <p class="mt-1 text-sm text-booklio-muted">{{ $description }}</p>
                @endif
            </div>
            @if ($action)
                <div class="shrink-0 text-sm font-semibold text-booklio-primary">
                    {{ $action }}
                </div>
            @endif
        </div>
    @endif

    {{ $slot }}
</section>