@props([
    'id' => 'modal',
    'title' => '',
    'size' => 'md',           // sm | md | lg | xl | full
    'scrollable' => true,
    'centered' => true,
    'staticBackdrop' => false,
    'footer' => null,
])

@php
    $sizeClass = match($size) {
        'sm' => 'modal-sm',
        'lg' => 'modal-lg',
        'xl' => 'modal-xl',
        'full' => 'modal-full-width',
        default => '',
    };
@endphp

<div class="modal modal-blur fade" id="{{ $id }}" tabindex="-1"
     @if($staticBackdrop) data-bs-backdrop="static" data-bs-keyboard="false" @endif
     aria-labelledby="{{ $id }}Title" aria-hidden="true">
    <div class="modal-dialog {{ $sizeClass }} {{ $centered ? 'modal-dialog-centered' : '' }} {{ $scrollable ? 'modal-dialog-scrollable' : '' }}">
        <div class="modal-content">
            @if($title)
                <div class="modal-header">
                    <h5 class="modal-title" id="{{ $id }}Title">{{ $title }}</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
            @endif
            <div class="modal-body">{{ $slot }}</div>
            @if($footer)
                <div class="modal-footer">{{ $footer }}</div>
            @endif
        </div>
    </div>
</div>