<template>
    <Header />
    <div class="finalize-page">
        <div class="loader-container">
            <div class="spinner"></div>
            <p>Finalisation du compte en cours...</p>
        </div>
    </div>
</template>

<script setup lang="ts">
import { onMounted } from "vue";
import { useRouter } from "vue-router";
import { finalizeAccount } from "@/services/Apis/Unauth";
import Header from "@/components/HeaderComponent.vue";
const router = useRouter();

onMounted(() => {
    finalizeAccount(
        () => {
            router.push("/JorCproject");
        },
        (error) => {
            console.error("Erreur lors de la finalisation :", error);
        }
    );
});
</script>

<style scoped>
.finalize-page {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 80vh;
    background-color: #f9fbfd;
}

.loader-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    color: #333;
    font-size: 1.1rem;
    font-style: italic;
}

.spinner {
    width: 50px;
    height: 50px;
    border: 5px solid #cfd8dc;
    border-top: 5px solid #3498db;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}
</style>
