<template>
  <Head>
    <Title>d[any] - Erreur {{ error?.statusCode }}</Title>
  </Head>
	<div class="text-light-100 dark:text-dark-100 flex bg-light-0 dark:bg-dark-0 h-screen overflow-hidden justify-center items-center flex-col gap-4">
		<NuxtRouteAnnouncer/>
        <div class="flex gap-4 items-center">
            <Icon icon="si:error-line" class="w-12 h-12 text-light-60 dark:text-dark-60"/>
            <div class="text-3xl">Une erreur est survenue.</div>
        </div>
        <pre class="text-center text-wrap">Erreur {{ error?.statusCode }}: {{ error?.message }}</pre>
        <Button @click="handleError">Revenir en lieu sûr</Button>
	</div>
</template>

<script setup lang="ts">
import type { NuxtError } from '#app';
import { Icon } from '@iconify/vue/dist/iconify.js';

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

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