@props([
    'title' => null,
    'padding' => 'p-5',
])
{{--
    The unit every panel is built from. Depth is one warm, broad shadow — a
    neutral grey drop shadow belongs to a different design language and reads
    as cold against this ground.
--}}
<div {{ $attributes->merge(['class' => 'rounded-lg border border-line bg-surface shadow-xs']) }}>
    @if ($title)
        {{-- A real heading, not a small-caps label. It was set in --text-faint,
             which is 2.8:1 on white: a decoration token used for something a
             reader has to read. --}}
        <div class="border-b border-line px-5 py-4">
            <h2 class="text-md font-semibold text-ink">{{ $title }}</h2>
        </div>
    @endif
    <div class="{{ $padding }}">
        {{ $slot }}
    </div>
</div>