@props([
    'title' => null,
    'subtitle' => null,
    'actions' => null,

    // A bootstrap-icons name, drawn in a tinted tile before the title.
    // Optional: every existing caller omits it and gets exactly the markup it
    // had before.
    'icon' => null,

    /*
     | How loudly the title is set.
     |
     | The default is the aside label the record's side panels use: small,
     | uppercase, deliberately quiet, because a column of eight of them should
     | not shout. A panel that is the main subject of its screen needs a real
     | heading instead, so it can be opted into rather than imposed on every
     | existing caller.
     */
    'heading' => 'label',
])

{{--
    A titled panel in the px design language.

    The same shape the patient record already used inline for demographics and
    the aside cards, named so the clinical lists can stop being Bootstrap cards
    in the middle of a screen that is not built from them.

    Was deliberately kept separate from <x-card> while both existed. As of
    2026-08-13 every screen has moved across and <x-card> has no callers left,
    so this is now the only panel in the product — reach for it, not for a
    Bootstrap card.
--}}
<div {{ $attributes->merge(['class' => 'px-panel px-panel--titled']) }}>
    @if ($title || $actions)
        <div class="px-panel__head">
            <div class="min-w-0 d-flex align-items-center gap-2">
                @if ($icon)
                    <span class="px-panel__icon" aria-hidden="true"><i class="bi {{ $icon }}"></i></span>
                @endif

                <div class="min-w-0">
                @if ($title)
                    <h2 class="{{ $heading === 'title' ? 'px-panel__title' : 'px-aside__title' }} mb-0">{{ $title }}</h2>
                @endif

                @if ($subtitle)
                    <p class="px-hint mt-1 mb-0">{{ $subtitle }}</p>
                @endif
                </div>
            </div>

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

    <div class="px-panel__body">
        {{ $slot }}
    </div>
</div>