<script setup lang="ts">
import type { NuxtError } from '#app'

const props = defineProps<{ error: NuxtError }>()

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

<template>
  <UContainer class="py-5 flex items-center justify-center">
    <AppLogo />
  </UContainer>
  <UContainer class="flex-grow flex flex-col items-center justify-center space-y-5">
    <h1 class="text-9xl font-bold">
      {{ props.error?.statusCode }}
    </h1>
    <div>{{ props.error?.message }}</div>
    <div
      v-if="props.error?.statusCode >= 500"
    >
      {{ error?.stack }}
    </div>
    <div>
      <UButton
        color="neutral"
        size="xl"
        variant="outline"
        label="Go back"
        @click="handleError"
      />
    </div>
  </UContainer>
</template>
