@props([
    'title',
    'subtitle' => null,
    'backRoute' => null,
    'backLabel' => 'Back',
])

<div class="mb-6 sm:mb-8">
    {{-- Back Button --}}
    @if($backRoute)
    <a href="{{ $backRoute }}" class="inline-flex items-center gap-2 text-db-text-muted hover:text-db-text-primary text-sm mb-4 transition-colors group">
        <svg class="w-4 h-4 group-hover:-translate-x-0.5 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18" />
        </svg>
        {{ $backLabel }}
    </a>
    @endif

    {{-- Header Row --}}
    <div class="flex flex-col gap-4 sm:flex-row sm:items-end sm:justify-between">
        <div class="min-w-0">
            <h1 class="text-2xl sm:text-3xl font-bold text-db-text-primary tracking-tight">{{ $title }}</h1>
            @if($subtitle)
            <p class="mt-1 text-sm text-db-text-muted">{{ $subtitle }}</p>
            @endif
        </div>

        {{-- Actions Slot --}}
        @if($slot->isNotEmpty())
        <div class="flex items-center gap-3 flex-shrink-0">
            {{ $slot }}
        </div>
        @endif
    </div>
</div>