<script setup lang="ts">
import { ListTodoIcon } from "@lucide/vue";
import { ref, onMounted, defineAsyncComponent } from "vue";
const PageFooter = defineAsyncComponent(
    () => import("@/components/PageFooter.vue"),
);
const AlertsContainer = defineAsyncComponent(
    () => import("@/components/AlertsContainer.vue"),
);

const visible = ref<boolean>(false);

onMounted(() => {
    setTimeout(() => {
        visible.value = true;
    });
});
</script>

<template>
    <main
        :style="{ display: visible ? 'flex' : 'none' }"
        class="min-h-screen flex-col w-screen"
    >
        <div class="hero bg-base-200 grow">
            <div class="hero-content text-center p-0">
                <div
                    class="max-w-md min-w-96 bg-base-100 rounded-box shadow-md"
                >
                    <h1
                        class="p-4 pb-2 text-4xl font-bold opacity-60 tracking-wide select-none"
                    >
                        <list-todo-icon :stroke-width="3" :size="32" class="inline" /> Tout Doux
                    </h1>
                    <router-view />
                </div>
            </div>
        </div>
        <page-footer />
        <alerts-container />
    </main>
</template>
