@props(['title' => null, 'subtitle' => null, 'padded' => true])
<section {{ $attributes->merge(['class' => 'overflow-hidden rounded-lg border border-line bg-surface shadow-panel']) }}>
    @if ($title)
        <div class="flex items-center gap-3 border-b border-line px-4 py-3 sm:px-5">
            <div class="min-w-0">
                <h3 class="truncate font-display text-sm font-semibold text-ink">{{ $title }}</h3>
                @if ($subtitle)
                    <p class="truncate font-mono text-[11px] text-ink-3">{{ $subtitle }}</p>
                @endif
            </div>
            @isset($actions)
                <div class="ml-auto flex shrink-0 items-center gap-2">{{ $actions }}</div>
            @endisset
        </div>
    @endif
    <div @class(['p-4 sm:p-5' => $padded])>{{ $slot }}</div>
</section>