<template>
    <lenis root :options="{ duration: 1, infinite: true, syncTouch: true }">
        <div :class="classes" :style="styles" id="container">
            <suspense>
                <layout />
            </suspense>
        </div>
    </lenis>
</template>

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

const { height } = useWindowSize()

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

// Load fonts
const fontsLoading = ref(true)
onMounted(() => {
    loadFonts([
        {
            name: 'Liberation Sans',
            weights: [400],
            styles: ['normal', 'italic'],
        },
        {
            name: 'IBM Plex Mono',
            weights: [400],
            styles: ['normal', 'italic'],
        },
    ])
        .then(() => {
            fontsLoading.value = false
        })
        .catch(() => {
            fontsLoading.value = false
        })
})

// Set vh value for mobile sizing
const styles = computed(() => ({
    '--vh': height.value ? height.value / 100 + 'px' : '100vh',
}))
</script>

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

    &:not(.fonts-ready) {
        opacity: 0;
    }
}
</style>
