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

@php
    $dialogClass = 'modal-dialog';
    if ($size) {
        $dialogClass .= ' modal-' . $size;
    }
    if ($centered) {
        $dialogClass .= ' modal-dialog-centered';
    }
@endphp

<div class="modal fade" id="{{ $id }}" tabindex="-1" aria-labelledby="{{ $id }}Label" aria-hidden="true" {{ $attributes }}>
    <div class="{{ $dialogClass }}">
        <div class="modal-content">
            @if($title || isset($header))
                <div class="modal-header">
                    @if($title)
                        <h5 class="modal-title" id="{{ $id }}Label">{{ $title }}</h5>
                    @endif
                    {{ $header ?? '' }}
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
            @endif

            <div class="modal-body">
                {{ $slot }}
            </div>

            @isset($footer)
                <div class="modal-footer">
                    {{ $footer }}
                </div>
            @endisset
        </div>
    </div>
</div>