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

<x-modal :id="$id" :maxWidth="$maxWidth" {{ $attributes }}>
    <div class="px-4 py-4 sm:px-6">
        <div class="text-lg font-semibold text-slate-900">
            {{ $title }}
        </div>

        <div class="mt-4 text-sm text-slate-600">
            {{ $content }}
        </div>
    </div>

    {{-- Footer buttons wrap on a phone: three actions in a row is wider than a 360px screen, and a modal that pushes the page sideways is the worst place for it to happen. --}}
    <div class="flex flex-row flex-wrap justify-end gap-2 px-4 py-4 sm:px-6 bg-slate-50 border-t border-slate-200 text-end">
        {{ $footer }}
    </div>
</x-modal>