@props([
    'eyebrow' => 'Billing',
    'title',
    'subtitle' => null,
])

<div {{ $attributes->merge(['class' => 'mb-6 flex flex-col gap-4 sm:flex-row sm:items-end sm:justify-between']) }}>
    <div class="min-w-0">
        <p class="text-xs font-semibold uppercase tracking-[0.14em] text-slate-400">{{ $eyebrow }}</p>
        <h2 class="mt-1 text-2xl font-bold tracking-tight text-slate-900 sm:text-3xl">{{ $title }}</h2>
        @if($subtitle)
            <p class="mt-2 max-w-2xl text-sm text-slate-500 sm:text-base">{{ $subtitle }}</p>
        @endif
    </div>
    @if(isset($actions) && trim($actions) !== '')
        <div class="flex shrink-0 flex-wrap items-center gap-2">
            {{ $actions }}
        </div>
    @endif
</div>