@props([
    'title',
    'subtitle' => null,
    'badge' => null,
    'badgeColor' => 'amber', // amber, emerald, cyan, purple
])

@php
    $badgeColors = [
        'amber' => 'bg-amber-500/15 text-amber-400',
        'emerald' => 'bg-emerald-500/15 text-emerald-400',
        'cyan' => 'bg-cyan-500/15 text-cyan-400',
        'purple' => 'bg-purple-500/15 text-purple-400',
        'blue' => 'bg-blue-500/15 text-blue-400',
    ];
@endphp

<div class="flex items-center gap-3 mb-4 sm:mb-5">
    <div class="flex items-center gap-2">
        <h3 class="text-base sm:text-lg font-semibold text-db-text-primary">{{ $title }}</h3>
        @if($badge)
        <span class="px-1.5 py-0.5 text-[9px] sm:text-[10px] font-bold uppercase tracking-wide rounded {{ $badgeColors[$badgeColor] ?? $badgeColors['amber'] }}">
            {{ $badge }}
        </span>
        @endif
    </div>
    @if($subtitle)
    <span class="text-sm text-db-text-muted hidden sm:inline">{{ $subtitle }}</span>
    @endif

    {{-- Optional slot for actions --}}
    @if($slot->isNotEmpty())
    <div class="ml-auto">
        {{ $slot }}
    </div>
    @endif
</div>