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

{{--
    PageHeader (component.md). Title + subtitle + breadcrumb on the left,
    action buttons via an "actions" slot on the right. Props: title, subtitle,
    breadcrumbs (array of label/href, passed to the breadcrumb component).
--}}

<div {{ $attributes->merge(['class' => 'mb-6 animate-fade-in']) }}>
    @if (! empty($breadcrumbs))
        <x-breadcrumb :items="$breadcrumbs" class="mb-2" />
    @endif

    <div class="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
        <div class="min-w-0">
            <h1 class="truncate text-2xl font-semibold text-primary dark:text-dark-text">{{ $title }}</h1>
            @if ($subtitle)
                <p class="mt-1 text-sm text-secondary dark:text-dark-text-secondary">{{ $subtitle }}</p>
            @endif
        </div>

        @isset($actions)
            <div class="flex shrink-0 flex-wrap items-center gap-2">
                {{ $actions }}
            </div>
        @endisset
    </div>
</div>