@props(['title', 'subtitle' => null, 'icon' => null, 'iconColor' => 'indigo', 'animate' => 'float'])

<div {{ $attributes->merge(['class' => 'mb-6 lg:mb-8 animate-slide-up']) }}>
    <div class="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
        <div class="flex items-start gap-4 min-w-0">
            @if ($icon)
                @php
                    $iconBoxClass = match ($iconColor) {
                        'emerald' => 'icon-box-emerald',
                        'amber' => 'icon-box-amber',
                        'red' => 'icon-box-red',
                        'violet' => 'icon-box-violet',
                        'cyan' => 'icon-box-cyan',
                        default => 'icon-box-indigo',
                    };
                    $animClass = match ($animate) {
                        'pulse' => 'animate-icon-pulse',
                        'spin' => 'animate-icon-spin-slow',
                        default => 'animate-icon-float',
                    };
                @endphp
                <div class="{{ $iconBoxClass }} {{ $animClass }}">
                    <x-icon :name="$icon" class="w-5 h-5" />
                </div>
            @endif
            <div class="min-w-0">
                <h2 class="text-xl sm:text-2xl font-bold text-themed truncate">{{ $title }}</h2>
                @if ($subtitle)
                    <p class="text-themed-muted text-sm mt-0.5">{{ $subtitle }}</p>
                @endif
            </div>
        </div>
        @if (isset($actions))
            <div class="flex flex-wrap gap-2 shrink-0">
                {{ $actions }}
            </div>
        @endif
    </div>
</div>