<template>
    
    <div class="app">
        <AppError class="app__error" :error-message="errorMessage" @handle-error="handleError" />
        <AppFooter class="app__footer" />
    </div>

</template>

<script setup>

    // --------------------------------------------------
    // DATA
    // --------------------------------------------------

    const props = defineProps({
        error: Object
    });
    const errorMessage = `Erreur ${props.error.statusCode}`;

    // --------------------------------------------------
    // HEAD
    // --------------------------------------------------

    useAppHead(errorMessage);

    // --------------------------------------------------
    // LOGIC
    // --------------------------------------------------

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

</script>

<style lang="scss" scoped>

    // --------------------------------------------------
    // STYLE
    // --------------------------------------------------

    .app {
    
        &__error {
            grid-area: app-main;
        }
    }


</style>
