@props(['id', 'title', 'size' => 'md'])

@php
$sizeClasses = [
'sm' => 'max-w-md',
'md' => 'max-w-lg',
'lg' => 'max-w-2xl',
'xl' => 'max-w-3xl',
'2xl' => 'max-w-4xl',
];
$maxWidth = $sizeClasses[$size] ?? $sizeClasses['md'];
@endphp

<div id="{{ $id }}" class="fixed inset-0 z-[9999] hidden" aria-labelledby="modal-title-{{ $id }}" role="dialog" aria-modal="true">
    <!-- Background overlay -->
    <div class="fixed inset-0 bg-gray-900/60 backdrop-blur-sm transition-opacity" data-modal-close="{{ $id }}" onclick="closeModal('{{ $id }}')"></div>

    <!-- Modal wrapper -->
    <div class="fixed inset-0 overflow-y-auto z-[10000] pointer-events-none">
        <div class="flex min-h-full items-center justify-center p-4 sm:p-6 pointer-events-none">
            <!-- Modal panel -->
            <div class="relative transform overflow-hidden rounded-2xl bg-white text-left shadow-2xl transition-all w-full {{ $maxWidth }} pointer-events-auto">
                <!-- Header -->
                <div class="flex items-center justify-between px-6 py-5 border-b border-gray-100">
                    <h3 class="text-lg font-semibold text-gray-900" id="modal-title-{{ $id }}">{{ $title }}</h3>
                    <button type="button" data-modal-close="{{ $id }}" onclick="closeModal('{{ $id }}')" class="text-gray-400 hover:text-gray-600 focus:outline-none rounded-lg p-1 hover:bg-gray-100 transition-colors" aria-label="Fermer">
                        <svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"></path>
                        </svg>
                    </button>
                </div>

                <!-- Content -->
                <div class="px-6 py-6">
                    {{ $slot }}
                </div>
            </div>
        </div>
    </div>
</div>
