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

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

const statusText = computed(() => props.error.statusText || 'Something went wrong.')

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

<template>
  <div class="flex min-h-screen flex-col items-center justify-center gap-4 bg-slate-950 px-6 text-center text-slate-50">
    <p class="text-sm font-medium uppercase tracking-[0.35em] text-cyan-300">
      Error occurred in this page
    </p>
    <h1 class="text-6xl font-semibold">
      {{ error.status }}
    </h1>
    <p class="max-w-xl text-slate-300">
      {{ statusText }}
    </p>
    <button
      class="rounded-md bg-cyan-300 px-5 py-3 text-sm font-semibold text-slate-950 transition hover:bg-cyan-200"
      type="button"
      @click="handleError"
    >
      Go back home
    </button>
  </div>
</template>
