@props(['id', 'title'])

<div id="{{ $id }}" class="fixed inset-0 z-50 p-4 overflow-y-auto hidden" aria-modal="true" role="dialog">
    {{-- Overlay sombre avec flou --}}
    <div class="fixed inset-0 bg-black/50 backdrop-blur-sm z-0" data-modal-close="{{ $id }}"></div>
    {{-- Conteneur centré --}}
    <div class="relative z-10 w-full flex min-h-full items-center justify-center py-8">
        <div class="w-full max-w-md rounded-xl bg-white shadow-xl border border-gray-200">
            {{-- En-tête : titre + fermer --}}
            <div class="flex items-center justify-between border-b border-gray-200 px-6 py-5">
                <h3 class="text-lg font-semibold text-gray-900">{{ $title }}</h3>
                <button type="button" class="rounded-lg p-2 text-gray-500 hover:bg-gray-100 hover:text-gray-700 transition-colors" data-modal-close="{{ $id }}" 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" />
                    </svg>
                </button>
            </div>
            {{-- Contenu du formulaire --}}
            <div class="px-6 py-6">
                {{ $slot }}
            </div>
        </div>
    </div>
</div>
