<script setup>
defineProps({
  open: {
    type: Boolean,
    default: false
  }
})

defineEmits(['stay', 'leave'])
</script>

<template>
  <Teleport to="body">
    <div
      v-if="open"
      class="admin-unsaved-modal fixed inset-0 z-[100] flex items-start justify-center bg-black/40 px-5 pb-8 pt-10"
      role="dialog"
      aria-modal="true"
      aria-labelledby="admin-unsaved-modal-title"
    >
      <div class="admin-unsaved-modal__content relative w-full max-w-[520px] rounded-xl bg-white text-[#15171a] shadow-2xl">
        <header class="admin-unsaved-modal__header border-b border-[#e3e6e8] px-8 py-6">
          <h1 id="admin-unsaved-modal-title" class="admin-unsaved-modal__title text-xl font-semibold tracking-[-0.01em]">
            이 페이지를 떠날까요?
          </h1>
        </header>
        <button
          class="admin-unsaved-modal__close absolute right-5 top-5 grid size-8 place-items-center rounded-md text-[#4d5663] transition hover:bg-[#eff1f2] hover:text-black"
          type="button"
          title="닫기"
          aria-label="닫기"
          @click="$emit('stay')"
        >
          <svg class="h-4 w-4" viewBox="0 0 24 24" aria-hidden="true">
            <path d="M12.707 12L23.854.854a.5.5 0 00-.707-.707L12 11.293.854.146a.5.5 0 00-.707.707L11.293 12 .146 23.146a.5.5 0 00.708.708L12 12.707l11.146 11.146a.5.5 0 10.708-.706L12.707 12z" fill="currentColor" />
          </svg>
        </button>
        <div class="admin-unsaved-modal__body space-y-3 px-8 py-7 text-sm leading-6 text-[#4d5663]">
          <p>저장하지 않은 변경사항이 있습니다.</p>
          <p>떠나기 전에 저장해 주세요.</p>
        </div>
        <footer class="admin-unsaved-modal__footer flex justify-end gap-3 border-t border-[#e3e6e8] px-8 py-5">
          <button
            class="admin-unsaved-modal__stay h-10 rounded-md border border-[#d7dce0] bg-white px-4 text-sm font-semibold text-[#394047] transition hover:bg-[#eff1f2]"
            type="button"
            @click="$emit('stay')"
          >
            머무르기
          </button>
          <button
            class="admin-unsaved-modal__leave h-10 rounded-md bg-[#e5484d] px-4 text-sm font-semibold text-white transition hover:bg-[#d21a26]"
            type="button"
            @click="$emit('leave')"
          >
            나가기
          </button>
        </footer>
      </div>
    </div>
  </Teleport>
</template>
