@props([
    'eyebrow' => null,
    'title' => null,
    'description' => null,
    'titleTag' => 'h2',
])

<div class="flex flex-wrap items-start justify-between gap-4">
    <div class="space-y-2">
        @if ($eyebrow)
            <div class="text-xs font-bold uppercase tracking-[0.18em] c-subtle">{{ $eyebrow }}</div>
        @endif

        @if ($title)
            @if ($titleTag === 'h1')
                <h1 class="text-2xl font-extrabold tracking-[-0.05em] c-main">{{ $title }}</h1>
            @elseif ($titleTag === 'h3')
                <h3 class="text-2xl font-extrabold tracking-[-0.05em] c-main">{{ $title }}</h3>
            @else
                <h2 class="text-2xl font-extrabold tracking-[-0.05em] c-main">{{ $title }}</h2>
            @endif
        @endif

        @if ($description)
            <p class="max-w-2xl text-sm leading-6 c-muted">
                {{ $description }}
            </p>
        @endif
    </div>

    @if (trim((string) $slot) !== '')
        <div class="flex flex-wrap gap-2">
            {{ $slot }}
        </div>
    @endif
</div>