<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 class="inline-flex justify-center items-center outline-none leading-none transition-[box-shadow]
        text-light-100 dark:text-dark-100 bg-light-20 dark:bg-dark-20 border border-light-40 dark:border-dark-40
        hover:bg-light-25 dark:hover:bg-dark-25 hover:border-light-50 dark:hover:border-dark-50
        focus:bg-light-30 dark:focus:bg-dark-30 focus:border-light-50 dark:focus:border-dark-50 focus:shadow-raw focus:shadow-light-50 dark:focus:shadow-dark-50 p-2" @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>