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

<header class="flex flex-col gap-4 border-b border-[#dde1e7] bg-white/95 px-4 py-5 backdrop-blur-sm sm:px-6 lg:sticky lg:top-0 lg:z-30 lg:flex-row lg:items-center lg:justify-between lg:px-8 lg:shadow-[0_1px_3px_rgba(48,21,42,0.05)]">
    <div class="min-w-0">
        <h1 class="text-xl font-bold leading-tight text-[#202124] sm:text-2xl">{{ $title }}</h1>
        @if ($description)
            <p class="mt-1 max-w-3xl text-sm leading-5 text-[#64616a]">{{ $description }}</p>
        @endif
    </div>
    @if (isset($actions))
        <div class="flex flex-wrap items-center gap-2 [&>*]:max-sm:flex-1">{{ $actions }}</div>
    @endif
</header>