@props([
    'title',
    'subtitle' => null,
    'badges' => [],
    'summaries' => [],
    'showHeading' => true,
    'showActions' => true,
])

@php
    $text = config('theme.colors.text');
    $hasMeta = $subtitle || count($badges) || count($summaries);
@endphp

@if ($showHeading || $showActions || $hasMeta)
    <div class="d-flex flex-wrap justify-content-between align-items-start gap-3 mb-4">
        <div class="min-w-0">
            @if ($showHeading)
                <div class="d-flex flex-wrap align-items-center gap-2 mb-1">
                    <h3 class="mb-0 fw-semibold" style="color: {{ $text }};">{{ $title }}</h3>
                    @foreach ($badges as $badge)
                        <x-ui.operational.status-badge :label="$badge['label']" :variant="$badge['variant'] ?? 'neutral'" />
                    @endforeach
                </div>
            @elseif (count($badges))
                <div class="d-flex flex-wrap align-items-center gap-2 mb-1">
                    @foreach ($badges as $badge)
                        <x-ui.operational.status-badge :label="$badge['label']" :variant="$badge['variant'] ?? 'neutral'" />
                    @endforeach
                </div>
            @endif
            @if ($subtitle)
                <small class="text-muted">{{ $subtitle }}</small>
            @endif
            @if (count($summaries))
                <ul class="list-inline small text-muted mb-0 mt-2">
                    @foreach ($summaries as $line)
                        <li class="list-inline-item me-3">{{ $line }}</li>
                    @endforeach
                </ul>
            @endif
        </div>

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