<template>
    <div class="flex flex-col min-h-screen bg-slate-100">
        <slot />

        <footer class="mx-auto w-full text-white bg-zinc-900 p-2"></footer>
        <div
            class="w-full mx-auto bg-zinc-800 flex flex-col justify-center items-center py-9 text-white fade-in-children"
        >
            <span> Max Gialanella - {{ new Date().getFullYear() }} </span>
        </div>
    </div>
</template>

<script setup>
    const route = useRoute();

    const updateMeta = () => {
        const sitePrefix = "Resume";
        const pageName = route.name
            .toLowerCase()
            .replace(/(?<= )[^\s]|^./g, (a) => a.toUpperCase());

        useSeoMeta({
            title: `${sitePrefix} | ${pageName}`,
            ogTitle: "Max Gialanella",
            description: "Max Gialanella",
            ogDescription: "Max Gialanella",
            // ogImage: 'https://example.com/image.png',
            // twitterCard: 'Ravenwulf Logo',
        });
    };
</script>

<style>
    body {
        color: rgb(47, 49, 50);
    }
    .page-enter-active,
    .page-leave-active {
        transition: opacity 0.4s ease;
    }
    .page-enter-from,
    .page-leave-to {
        opacity: 0;
    }
</style>
