@props([
  'id' => 'modal-' . uniqid(),
  'title' => 'Modal',
  'size' => 'md',
])

<div
  x-data="modal()"
  x-cloak
  class="relative"
  {{ $attributes }}
>
  <!-- Trigger Button Slot -->
  {{ $trigger ?? '' }}

  <!-- Modal Overlay & Content -->
  <div
    x-show="open"
    @click.away="close_modal()"
    class="modal-overlay"
    x-transition:enter="transition ease-out duration-200"
    x-transition:enter-start="opacity-0"
    x-transition:enter-end="opacity-100"
    x-transition:leave="transition ease-in duration-150"
    x-transition:leave-start="opacity-100"
    x-transition:leave-end="opacity-0"
  >
    <div
      class="modal-content {{ $size === 'sm' ? 'max-w-sm' : ($size === 'lg' ? 'max-w-2xl' : 'max-w-md') }}"
      @click.stop
      x-transition:enter="transition ease-out duration-200"
      x-transition:enter-start="opacity-0 scale-95"
      x-transition:enter-end="opacity-100 scale-100"
      x-transition:leave="transition ease-in duration-150"
      x-transition:leave-start="opacity-100 scale-100"
      x-transition:leave-end="opacity-0 scale-95"
    >
      <!-- Modal Header -->
      <div class="modal-header">
        <h3 class="modal-title">{{ $title }}</h3>
        <button
          @click="close_modal()"
          type="button"
          class="text-slate-400 hover:text-slate-600 transition-colors duration-200"
        >
          <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
          </svg>
        </button>
      </div>

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

      <!-- Modal Footer -->
      @if (isset($footer))
        <div class="modal-footer">
          {{ $footer }}
        </div>
      @endif
    </div>
  </div>
</div>