<script setup>
defineProps({
  modelValue: { type: Boolean, required: true },
  title: { type: String, default: '' },
  zIndex: { type: Number, default: 1000 },
})
defineEmits(['update:modelValue'])
</script>

<template>
  <Teleport to="body">
    <Transition name="am">
      <div v-if="modelValue" class="am-wrap" :style="{ zIndex }">
        <div class="am-panel" role="dialog" aria-modal="true">
          <button class="am-close" type="button" @click="$emit('update:modelValue', false)">×</button>
          <div class="am-inner">
            <h2 v-if="title" class="am-title">{{ title }}</h2>
            <slot />
          </div>
        </div>
      </div>
    </Transition>
  </Teleport>
</template>

<style scoped>
.am-wrap {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
}

.am-panel {
  position: absolute;
  inset: 0;
  background: var(--color-background);
  overflow-y: auto;
  padding: calc(3rem + env(safe-area-inset-top)) 1.25rem calc(2rem + env(safe-area-inset-bottom));
}

.am-inner {
  max-width: 460px;
  margin: 0 auto;
}

.am-close {
  position: absolute;
  top: calc(0.5rem + env(safe-area-inset-top));
  right: 0.6rem;
  width: 2rem;
  height: 2rem;
  border: 0;
  background: transparent;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  color: var(--color-text);
  z-index: 1;
}

.am-title {
  margin-bottom: 1.25rem;
  font-size: 1.2rem;
  text-align: center;
}

/* ── 슬라이드업 애니메이션 ── */
.am-enter-active {
  transition: background 0.25s ease;
}
.am-leave-active {
  transition: background 0.2s ease;
}
.am-enter-from,
.am-leave-to {
  background: rgba(0, 0, 0, 0);
}
.am-enter-active .am-panel {
  transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1);
}
.am-leave-active .am-panel {
  transition: transform 0.22s cubic-bezier(0.4, 0, 1, 1);
}
.am-enter-from .am-panel,
.am-leave-to .am-panel {
  transform: translateY(100%);
}
</style>
