<script setup lang="ts">
interface Props {
  error: {
    statusCode: number
    statusMessage: string
    message: string
  }
}

const props = defineProps<Props>()

const errorMessages: Record<number, string> = {
  404: '페이지를 찾을 수 없습니다',
  403: '접근 권한이 없습니다',
  500: '서버 오류가 발생했습니다',
}

const errorTitle = computed(
  () => errorMessages[props.error.statusCode] ?? '오류가 발생했습니다'
)

function handleError() {
  clearError({ redirect: '/' })
}
</script>

<template>
  <div class="min-h-screen flex items-center justify-center bg-background">
    <div class="text-center px-4">
      <p class="text-8xl font-bold text-muted-foreground/30 mb-4">
        {{ error.statusCode }}
      </p>
      <h1 class="text-2xl font-semibold mb-2">{{ errorTitle }}</h1>
      <p class="text-muted-foreground mb-8 max-w-md mx-auto">
        {{ error.message || error.statusMessage }}
      </p>
      <button
        @click="handleError"
        class="inline-flex items-center gap-2 px-4 py-2 rounded-md bg-primary text-primary-foreground hover:bg-primary/90 transition-colors"
      >
        <Icon name="lucide:arrow-left" class="w-4 h-4" />
        홈으로 돌아가기
      </button>
    </div>
  </div>
</template>
