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

@php
    $sizeClass = match($size) {
        'sm'  => 'max-w-sm',
        'lg'  => 'max-w-2xl',
        'xl'  => 'max-w-4xl',
        default => 'max-w-lg',
    };
@endphp

<div id="{{ $id }}" class="fixed inset-0 z-50 hidden" role="dialog" aria-modal="true">

    {{-- Overlay --}}
    <div class="fixed inset-0 bg-slate-900 bg-opacity-50 transition-opacity"
         onclick="fecharModal('{{ $id }}')"></div>

    {{-- Painel --}}
    <div class="fixed inset-0 flex items-center justify-center p-4 pointer-events-none">
        <div class="{{ $sizeClass }} w-full bg-white rounded-xl shadow-xl pointer-events-auto">

            {{-- Cabeçalho --}}
            <div class="flex items-center justify-between px-6 py-4 border-b border-slate-200">
                <h3 class="text-base font-semibold text-slate-800">{{ $title }}</h3>
                <button type="button"
                        onclick="fecharModal('{{ $id }}')"
                        class="text-slate-400 hover:text-slate-600 transition-colors">
                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                              d="M6 18L18 6M6 6l12 12"/>
                    </svg>
                </button>
            </div>

            {{-- Corpo --}}
            <div class="px-6 py-5">
                {{ $slot }}
            </div>

            {{-- Rodapé (opcional) --}}
            @isset($footer)
                <div class="flex justify-end gap-3 px-6 py-4 border-t border-slate-200 bg-slate-50 rounded-b-xl">
                    {{ $footer }}
                </div>
            @endisset

        </div>
    </div>

</div>