{{--
    Section Header Component - shadcn-style
    
    Usage:
    <x-proxmox::ui.section-header title="Section Title" />
    <x-proxmox::ui.section-header title="Title" subtitle="Subtitle" icon="ri-server-line">
        <x-slot:actions>
            <x-proxmox::ui.button>Action</x-proxmox::ui.button>
        </x-slot:actions>
    </x-proxmox::ui.section-header>
--}}

@props([
    'title',
    'subtitle' => null,
    'icon' => null,
    'iconColor' => 'text-primary',
    'actions' => null,
    'helpText' => null,
    'size' => 'lg',
])

@php
    $titleSizes = [
        'sm' => 'text-base font-semibold',
        'md' => 'text-lg font-semibold',
        'lg' => 'text-xl font-semibold tracking-tight',
        'xl' => 'text-2xl font-bold tracking-tight',
    ];
    $titleClass = $titleSizes[$size] ?? $titleSizes['lg'];
@endphp

<div {{ $attributes->class(['flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between']) }}>
    <div class="flex items-start gap-3">
        @if($icon)
            <div class="flex-shrink-0 flex items-center justify-center size-9 rounded-lg bg-primary/10">
                <x-dynamic-component :component="$icon" class="size-4 {{ $iconColor }}" />
            </div>
        @endif
        <div class="space-y-1">
            <div class="flex items-center gap-2 min-w-0">
                <h2 class="{{ $titleClass }}">{{ $title }}</h2>
                @if($helpText)
                    <div class="relative" x-data="{ open: false }" x-cloak>
                        <button 
                            type="button" 
                            @click="open = true" 
                            class="text-muted-foreground hover:text-foreground transition-colors duration-150"
                        >
                            <x-ri-question-line class="size-4" />
                        </button>
                        {{-- Help Modal --}}
                        <div 
                            x-show="open"
                            x-transition:enter="transition ease-out duration-150"
                            x-transition:enter-start="opacity-0"
                            x-transition:enter-end="opacity-100"
                            x-transition:leave="transition ease-in duration-100"
                            x-transition:leave-start="opacity-100"
                            x-transition:leave-end="opacity-0"
                            @click="open = false"
                            @keydown.escape.window="open = false"
                            class="fixed inset-0 z-50 bg-black/50 backdrop-blur-sm"
                            style="display: none;"
                        ></div>
                        <div 
                            x-show="open"
                            x-transition:enter="transition ease-out duration-150"
                            x-transition:enter-start="opacity-0 scale-95"
                            x-transition:enter-end="opacity-100 scale-100"
                            x-transition:leave="transition ease-in duration-100"
                            x-transition:leave-start="opacity-100 scale-100"
                            x-transition:leave-end="opacity-0 scale-95"
                            @click.away="open = false"
                            class="fixed inset-0 z-50 flex items-center justify-center p-4"
                            style="display: none;"
                        >
                            <div class="relative w-full max-w-lg max-h-[90vh] overflow-y-auto rounded-lg border bg-background shadow-lg p-6">
                                <button @click="open = false" class="absolute top-4 right-4 rounded-sm opacity-70 ring-offset-background transition-opacity duration-150 hover:opacity-100">
                                    <x-ri-close-line class="size-4" />
                                </button>
                                <div class="flex items-center gap-3 mb-4 pr-8">
                                    @if($icon)
                                        <div class="flex items-center justify-center size-9 rounded-lg bg-primary/10">
                                            <x-dynamic-component :component="$icon" class="size-4 {{ $iconColor }}" />
                                        </div>
                                    @endif
                                    <h3 class="text-lg font-semibold leading-none tracking-tight">{{ $title }}</h3>
                                </div>
                                <div class="text-sm text-muted-foreground">
                                    {{ $helpText }}
                                </div>
                            </div>
                        </div>
                    </div>
                @endif
            </div>
            @if($subtitle)
                <p class="text-sm text-muted-foreground">{{ $subtitle }}</p>
            @endif
        </div>
    </div>
    
    @if($actions)
        <div class="flex items-center gap-2 flex-shrink-0">
            {{ $actions }}
        </div>
    @endif
</div>