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

@php
    $sizeClass = $size === 'sm'
        ? 'text-lg font-extrabold tracking-[-0.04em] sm:text-xl'
        : 'text-2xl font-extrabold tracking-[-0.05em]';

    $wrapperClass = trim((string) $slot) !== ''
        ? 'flex flex-wrap items-end justify-between gap-4'
        : 'space-y-2';
@endphp

<div class="{{ $wrapperClass }}">
    <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="{{ $sizeClass }} c-main">{{ $title }}</h1>
            @elseif ($titleTag === 'h3')
                <h3 class="{{ $sizeClass }} c-main">{{ $title }}</h3>
            @else
                <h2 class="{{ $sizeClass }} 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>