@props([
    'name' => 'modal',
    'title' => '',
    'maxWidth' => 'xs',
    'backdrop' => 'dark'
])

@php
$maxWidthClass = match($maxWidth) {
    'xs' => 'max-w-xs',
    'sm' => 'max-w-sm',
    'md' => 'max-w-md',
    'lg' => 'max-w-lg',
    'xl' => 'max-w-xl',
    '2xl' => 'max-w-2xl',
    default => 'max-w-xs',
};

$backdropClass = $backdrop === 'dark' 
    ? 'bg-black/80 backdrop-blur-md' 
    : 'bg-black/40 backdrop-blur-sm';
@endphp

<!-- Modal -->
<div id="{{ $name }}" class="hidden fixed inset-0 {{ $backdropClass }} flex items-center justify-center z-50 p-4" onclick="if(event.target === this) this.classList.add('hidden')">
    <div class="bg-white rounded-2xl shadow-2xl w-full {{ $maxWidthClass }} transform transition-all" onclick="event.stopPropagation()">
        @if($title)
        <!-- Header -->
        <div class="px-6 py-4 border-b border-gray-100 flex items-center justify-between">
            <h3 class="text-xl font-bold text-gray-900">{{ $title }}</h3>
            <button 
                onclick="document.getElementById('{{ $name }}').classList.add('hidden')"
                class="text-gray-400 hover:text-gray-600 transition-colors p-1"
            >
                <svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
                </svg>
            </button>
        </div>
        @endif

        <!-- Content -->
        <div class="px-6 py-4">
            {{ $slot }}
        </div>
    </div>
</div>