<template>
  <div class="min-h-screen bg-sky-dark text-sky-text flex flex-col items-center justify-center p-8">
    <h1 class="text-6xl font-bold text-sky-accent mb-4">
      {{ error?.statusCode || 500 }}
    </h1>

    <p class="text-xl font-narrative mb-8 text-center max-w-md">
      {{ errorMessage }}
    </p>

    <button
      class="px-6 py-3 bg-sky-accent text-sky-dark font-ui font-semibold rounded-lg hover:opacity-90 transition-opacity"
      @click="handleError"
    >
      {{ $t('common.back_home') }}
    </button>
  </div>
</template>

<script setup lang="ts">
const props = defineProps<{
  error: {
    statusCode: number
    message: string
  }
}>()

const { t } = useI18n()

const errorMessage = computed(() => {
  if (props.error?.statusCode === 404) {
    return t('error.404')
  }
  return t('error.generic')
})

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