<script setup>
const error = useError()

const statusCode = computed(() => Number(error.value?.statusCode || 500))
const isNotFound = computed(() => statusCode.value === 404)
const pageTitle = computed(() => (isNotFound.value ? '페이지를 찾을 수 없습니다' : '오류가 발생했습니다'))
const pageDescription = computed(() => (
  isNotFound.value
    ? '요청한 주소가 없거나 공개되지 않은 페이지입니다.'
    : '잠시 후 다시 시도해 주세요.'
))

useHead(() => ({
  title: pageTitle.value
}))

/**
 * 오류 상태를 정리하고 홈으로 이동한다.
 * @returns {Promise<void>} 이동 처리
 */
const goHome = () => clearError({ redirect: '/' })
</script>

<template>
  <main class="error-page min-h-screen bg-[var(--site-bg)] px-5 py-12 text-[var(--site-text)]">
    <section class="error-page__panel mx-auto flex min-h-[calc(100vh-6rem)] max-w-3xl flex-col items-start justify-center">
      <p class="error-page__code text-sm font-semibold uppercase tracking-[0.12em] text-[var(--site-muted)]">
        {{ statusCode }}
      </p>
      <h1 class="error-page__title mt-4 text-4xl font-bold tracking-tight md:text-6xl">
        {{ pageTitle }}
      </h1>
      <p class="error-page__description mt-5 max-w-xl text-base leading-7 text-[var(--site-muted)] md:text-lg">
        {{ pageDescription }}
      </p>
      <button
        class="error-page__home-button mt-8 inline-flex h-11 items-center justify-center rounded-md bg-[var(--site-text)] px-5 text-sm font-semibold text-[var(--site-bg)] transition hover:opacity-85"
        type="button"
        @click="goHome"
      >
        홈으로 이동
      </button>
    </section>
  </main>
</template>
