<template>
    <ThemeProvider>
        <TooltipProvider>
            <ClientOnly>
                <Sonner />
            </ClientOnly>
            <div class="w-full">
                <header ref="header">
                    <AppHeader />
                </header>
                <main class="h-screen pt-20">
                    <slot />
                </main>
            </div>
        </TooltipProvider>
    </ThemeProvider>
</template>

<script setup>
import 'vue-sonner/style.css'
import Sonner from '@/components/ui/sonner/Sonner.vue';
import AppHeader from '@/components/ui/internal/AppHeader.vue';

import Headroom from "headroom.js";
import ThemeProvider from '~/components/ui/provider/ThemeProvider.vue';
import TooltipProvider from '~/components/ui/tooltip/TooltipProvider.vue';



const header = ref(null);

onMounted(() => {
    const headroom = new Headroom(header.value, {
        offset: 25,
        tolerance: {
            up: 25,
            down: 10
        },
        classes: {
            initial: "headroom",
            pinned: 'headroom--pinned',
            unpinned: 'headroom--unpinned',
        }
    });
    headroom.init();
});

const colorMode = useColorMode()
useHead({
    link: [
        {
            rel: 'icon',
            type: 'image/x-icon',
            href: computed(() => colorMode.value === 'dark' ? 'favicon-dark.ico' : 'favicon.ico')
        }
    ]
})
</script>

<style>
.headroom {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 50;
    width: 100%;
    transition: transform 200ms linear;
    background-color: var(--background);
}

.headroom--pinned {
    transform: translateY(0%);
}

.headroom--unpinned {
    transform: translateY(-100%);
}
</style>
