<template>
    <lenis root>
        <div :class="classes">
            <slot />
        </div>
    </lenis>
</template>

<script setup>
import '@/styles/main.scss'
import { ref, computed, onMounted } from 'vue'
import loadFonts from '@fuzzco/font-loader'
import { useWindowSize } from '@vueuse/core'
import Lenis from '@/components/Lenis.vue'

const { height } = useWindowSize()

const fontsLoading = ref(true)

const classes = computed(() => [
    'container',
    { 'fonts-ready': !fontsLoading.value },
    'theme-dark',
])

onMounted(async () => {
    // Load fonts
    loadFonts([
        {
            name: 'Leibniz Fraktur',
            weights: [400],
        },
        {
            name: 'Geist Mono',
            weights: [400, 700],
        },
    ])
        .then(() => {
            fontsLoading.value = false
        })
        .catch(() => {
            fontsLoading.value = false
        })
})
</script>

<style lang="scss">
.container {
    min-height: 100vh;
    max-width: 100vw;
    overflow-x: clip;
    background: var(--theme-bg);
    color: var(--theme-fg);
    transition: opacity 1000ms;

    &:not(.fonts-ready) {
        opacity: 0;
    }
}

/* Page Transition Animation */
#page-content {
    opacity: 1;
    transition: opacity 0.3s ease-in-out;
}
body.page-transition #page-content {
    opacity: 0;
}
</style>
