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

const props = defineProps({
  error: Object as () => NuxtError,
})

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

<template>
  <div>
    <h2>{{ error?.statusCode }}</h2>
    <p class="text-red-500">{{ error?.statusMessage }}</p>
    <button class="bg-blue-500 text-white p-2 rounded-md" @click="handleError">
      Clear errors
    </button>
  </div>
</template>

<style scoped>
.error {
  @apply text-red-500;
}
</style>
