<template>
  <Teleport to="body">
    <div v-if="modelValue" class="fixed inset-0 z-50" @click.self="close">
      <!-- Backdrop -->
      <div class="fixed inset-0 bg-black/50" @click="close"></div>
      
      <!-- Modal Panel -->
      <div class="fixed inset-0 flex items-center justify-center p-4">
        <div 
          class="bg-white rounded-lg shadow-xl max-w-[85vw] max-h-[85vh] overflow-auto relative"
          :style="{ maxHeight }"
        >
          <!-- Close button -->
          <button 
            @click="close" 
            class="absolute top-4 right-4 z-10 text-gray-500 hover:text-gray-700 text-2xl leading-none"
          >
            &times;
          </button>
          
          <!-- Content -->
          <slot />
        </div>
      </div>
    </div>
  </Teleport>
</template>

<script setup>
const props = defineProps({
  modelValue: Boolean,
  maxHeight: {
    type: String,
    default: '85vh'
  }
})

const emit = defineEmits(['update:modelValue'])

const close = () => {
  emit('update:modelValue', false)
}
</script>
