@props([
    'id',
    'title' => null,
    'maxWidth' => '2xl',
    'onClose' => null,
])

@php
    $maxWidths = [
        'sm'   => 'max-w-sm',
        'md'   => 'max-w-md',
        'lg'   => 'max-w-lg',
        'xl'   => 'max-w-xl',
        '2xl'  => 'max-w-2xl',
        '5xl'  => 'max-w-5xl',
        '7xl'  => 'max-w-7xl',
        'full' => 'max-w-full mx-4',
    ];

    $maxWidthClass = $maxWidths[$maxWidth] ?? $maxWidths['2xl'];
@endphp

<div id="{{ $id }}" {{ $attributes->merge(['class' => 'admin-modal fixed inset-0 w-screen h-screen bg-slate-950/85 backdrop-blur-md flex items-center justify-center z-[1000] opacity-0 pointer-events-none transition-opacity duration-300 [&.active]:opacity-100 [&.active]:pointer-events-auto']) }}>
    <div class="admin-modal-content bg-slate-900 border border-slate-700/60 rounded-2xl w-[90%] {{ $maxWidthClass }} p-7 shadow-2xl text-white max-h-[90vh] overflow-y-auto">
        @if($title || isset($headerActions))
            <div class="flex items-center justify-between pb-4 mb-4 border-b border-white/10">
                @if($title)
                    <h3 class="font-outfit text-xl font-bold text-white m-0">{{ $title }}</h3>
                @endif
                <div class="flex items-center gap-2">
                    @if(isset($headerActions))
                        {{ $headerActions }}
                    @endif
                    <button type="button" onclick="document.getElementById('{{ $id }}').classList.remove('active'); {{ $onClose ? $onClose . '();' : '' }}" class="bg-transparent border-none text-slate-400 hover:text-white text-2xl cursor-pointer leading-none px-1">&times;</button>
                </div>
            </div>
        @endif

        <div>
            {{ $slot }}
        </div>
    </div>
</div>