<template>
    <div v-if="global" class="layout" :style="{ '--header-height': headerHeight + 'px' }">
        <site-header v-show="showHeader" :copy="headerCopy" :dl="headerDl" ref="header" />

         <client-only>
            <mosaic-scroll :items="mosaicItems" />
        </client-only>

         <suspense>
             <router-view v-slot="{ Component }">
                 <transition name="quick-fade" mode="out-in">
                     <component :is="Component" :key="route.path" />
                 </transition>
             </router-view>
         </suspense>
    </div>
</template async>

<script setup>
import { computed, ref} from 'vue';
import { useSeoMeta } from '@unhead/vue'
import { useStrapiGlobal } from '@/composables/useStrapi'
import { useRoute } from 'vue-router';
import useBreakpoints from '@/composables/useBreakpoints';
import { useElementSize } from '@vueuse/core';

const header = ref()

const route = useRoute()
const { data: global } = await useStrapiGlobal()
const { isMobile } = useBreakpoints()
const { height: headerHeight } = useElementSize(header)



const headerCopy = computed(() => global.value?.header_copy)
const headerDl = computed(() => global.value?.header_dl)
const mosaicItems = computed(() => global.value?.mosaic_items || [])
const showHeader = computed(() => !(route.name === 'mosaic-item' && isMobile.value))

// SEO
const seo = computed(() => global.value?.seo)
useSeoMeta({
  title: seo.value?.title || '',
  description: seo.value?.description || '',
  ogImage: {
    url: seo.value?.image?.url || '',
  },
})
</script>

<style lang="scss">
.layout {
    position: relative;
    width: 100%;
}
</style>
