<template>
  <Teleport to="body">
    <Transition name="modal">
      <div
        v-if="show"
        class="fixed inset-0 z-[2000] flex items-center justify-center p-4"
        role="dialog"
        aria-modal="true"
        :aria-labelledby="ariaLabelledby"
        @keydown.escape="$emit('close')"
      >
        <button
          type="button"
          class="absolute inset-0 bg-black/60 transition-opacity"
          aria-label="Close"
          @click="$emit('close')"
        />
        <div
          class="relative w-full"
          @click.stop
        >
          <slot />
        </div>
      </div>
    </Transition>
  </Teleport>
</template>

<script setup>
defineProps({
  show: Boolean,
  ariaLabelledby: { type: String, default: undefined },
})

defineEmits(['close'])
</script>
