@props(['title' => null, 'subtitle' => null, 'actions' => null, 'padded' => true, 'icon' => null])

<section {{ $attributes->merge(['class' => 'overflow-hidden rounded-xl border border-slate-200/80 bg-white shadow-sm shadow-slate-200/50']) }}>
    @if ($title || $actions)
        <header class="flex flex-wrap items-center justify-between gap-3 border-b border-slate-100 px-5 py-3.5">
            <div class="flex min-w-0 items-center gap-3">
                @if ($icon)
                    <span class="flex size-8 shrink-0 items-center justify-center rounded-lg bg-brand-50 text-brand-600">
                        <x-icon :name="$icon" class="size-4" />
                    </span>
                @endif
                <div class="min-w-0">
                    @if ($title)
                        <h2 class="truncate text-sm font-bold text-slate-900">{{ $title }}</h2>
                    @endif
                    @if ($subtitle)
                        <p class="mt-0.5 truncate text-xs text-slate-500">{{ $subtitle }}</p>
                    @endif
                </div>
            </div>

            @if ($actions)
                <div class="flex shrink-0 items-center gap-2">{{ $actions }}</div>
            @endif
        </header>
    @endif

    <div class="{{ $padded ? 'p-5' : '' }}">{{ $slot }}</div>
</section>