@props([
    'id' => 'modal-' . uniqid(),
    'title' => null,
    'size' => 'md', // sm | md | lg | xl
    'backdrop' => true,
    'scrollable' => true,
    'centered' => true,
    'closeButton' => true,
])

@php
    $sizeClass = match($size) {
        'sm' => 'modal-sm',
        'lg' => 'modal-lg',
        'xl' => 'modal-xl',
        default => '',
    };
    $dialogClasses = trim('modal-dialog ' . $sizeClass . ($scrollable ? ' modal-dialog-scrollable' : '') . ($centered ? ' modal-dialog-centered' : ''));
@endphp

<div class="modal fade" id="{{ $id }}" tabindex="-1" aria-labelledby="{{ $id }}-label" aria-hidden="true"
     data-bs-backdrop="{{ $backdrop === false ? 'false' : ($backdrop === 'static' ? 'static' : 'true') }}">
    <div class="{{ $dialogClasses }}">
        <div class="modal-content">
            @if($title || $closeButton)
                <div class="modal-header">
                    @if($title)<h5 class="modal-title" id="{{ $id }}-label">{{ $title }}</h5>@endif
                    @if($closeButton)
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    @endif
                </div>
            @endif
            <div class="modal-body">
                {{ $slot }}
            </div>
            @isset($footer)
                <div class="modal-footer">
                    {{ $footer }}
                </div>
            @endisset
        </div>
    </div>
</div>