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

<section
    {{ $attributes->class(['ui-page-header']) }}
    aria-labelledby="page-title"
>
    <div class="ui-page-header-content">
        <div class="flex min-w-0 items-start gap-4">
            @isset($icon)
                <div class="ui-page-header-icon" aria-hidden="true">
                    {{ $icon }}
                </div>
            @endisset

            <div class="min-w-0">
                @if ($eyebrow)
                    <div class="ui-page-header-eyebrow">
                        {{ $eyebrow }}
                    </div>
                @endif

                <h1 id="page-title" class="ui-page-header-title">
                    {{ $title }}
                </h1>

                @if ($description)
                    <p class="ui-page-header-description">
                        {{ $description }}
                    </p>
                @endif

                @isset($meta)
                    <div class="ui-page-header-meta">
                        {{ $meta }}
                    </div>
                @endisset
            </div>
        </div>

        @isset($actions)
            <div class="ui-page-header-actions">
                {{ $actions }}
            </div>
        @endisset
    </div>
</section>