@props(['open' => false, 'title' => '', 'subtitle' => null, 'close' => 'closeModal', 'wide' => false])

@if ($open)
    <div
        class="modal-scrim fixed inset-0 z-50 flex items-center justify-center p-3 sm:p-6"
        role="presentation"
    >
        <div
            {{ $attributes->merge([
                'class' => 'modal-panel',
                'role' => 'dialog',
                'aria-modal' => 'true',
                'aria-label' => $title,
                'style' => $wide ? 'max-width: 42rem; width: 100%;' : 'max-width: 28rem; width: 100%;',
            ]) }}
        >
            <div class="flex items-start justify-between gap-3">
                <div class="min-w-0">
                    <h2>{{ $title }}</h2>
                    @if ($subtitle)
                        <p class="mt-0.5 text-sm text-mute">{{ $subtitle }}</p>
                    @endif
                </div>
                <button
                    type="button"
                    class="btn-ghost btn-icon shrink-0"
                    title="Cerrar"
                    aria-label="Cerrar"
                    wire:click="{{ $close }}"
                >
                    <x-icon name="close" />
                </button>
            </div>
            <div class="mt-4 flex min-h-0 flex-1 flex-col overflow-visible">
                {{ $slot }}
            </div>
        </div>
    </div>
@endif