@props([
    'id',
    'title',
    'description' => null,
])

@php
    $titleId = $id.'-title';
    $descriptionId = $id.'-description';
@endphp

<dialog
    id="{{ $id }}"
    aria-labelledby="{{ $titleId }}"
    @if ($description) aria-describedby="{{ $descriptionId }}" @endif
    class="m-auto w-[calc(100%-2rem)] max-w-md rounded-3xl border-0 bg-white p-0 text-slate-900 shadow-2xl backdrop:bg-slate-950/60"
>
    <div class="border-b border-slate-100 px-5 py-4 sm:px-6">
        <div class="flex items-start justify-between gap-4">
            <div>
                <h2 id="{{ $titleId }}" class="text-lg font-semibold">{{ $title }}</h2>
                @if ($description)
                    <p id="{{ $descriptionId }}" class="mt-1 text-sm leading-6 text-slate-600">{{ $description }}</p>
                @endif
            </div>
            <button type="button" data-modal-close aria-label="Cerrar" class="grid size-9 shrink-0 place-items-center rounded-full text-xl text-slate-500 transition hover:bg-slate-100 hover:text-slate-900">&times;</button>
        </div>
    </div>
    <div class="p-5 sm:p-6">
        {{ $slot }}
    </div>
</dialog>