@props(['id', 'maxWidth' => 'md', 'title' => 'Thông báo', 'hideHeader' => false])

@php
$maxWidthClass = [
    'sm' => 'sm:max-w-sm',
    'md' => 'sm:max-w-md',
    'lg' => 'sm:max-w-lg',
    'xl' => 'sm:max-w-xl',
    '2xl' => 'sm:max-w-2xl',
][$maxWidth] ?? 'sm:max-w-md';
@endphp

@push('modals')
<div id="{{ $id }}" class="fixed inset-0 z-[100] hidden flex-col items-center justify-center outline-none opacity-0 transition-opacity duration-300" aria-labelledby="modal-title-{{ $id }}" role="dialog" aria-modal="true">
    <!-- Backdrop overlay -->
    <div class="absolute inset-0 bg-gray-900/60 backdrop-blur-sm cursor-pointer" onclick="closeModal('{{ $id }}')"></div>
    
    <!-- Modal Panel -->
    <div class="modal-panel bg-white rounded-xl shadow-2xl w-full {{ $maxWidthClass }} overflow-hidden z-50 relative transform scale-95 translate-y-4 transition-all duration-300 m-4 flex flex-col max-h-[90vh]">
        
        @if(!$hideHeader)
            @if(isset($header))
                {{ $header }}
            @else
                <div class="px-6 py-5 border-b border-gray-100 flex items-center justify-between bg-gray-50/50 shrink-0">
                    <h3 id="modal-title-{{ $id }}" class="text-lg font-bold text-gray-900">{{ $title }}</h3>
                    <button type="button" onclick="closeModal('{{ $id }}')" class="text-gray-400 hover:text-gray-600 transition-colors focus:outline-none">
                        <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg>
                    </button>
                </div>
            @endif
        @endif

        <div class="overflow-y-auto px-6 py-6 grow">
            {{ $slot }}
        </div>

        @if(isset($footer))
            <div class="px-6 py-4 bg-gray-50 flex flex-col sm:flex-row-reverse gap-3 border-t border-gray-100 shrink-0">
                {{ $footer }}
            </div>
        @endif
    </div>
</div>
@endpush