<script setup lang="ts">
import { ref } from 'vue'
import { RouterView } from 'vue-router'
import { debounce } from '@/helper'
import SiteNav from '@/components/SiteNav.vue'
import HeroHeader from '@/components/HeroHeader.vue'

const scrollContainer = ref<HTMLElement | any>()

const scrollBlur = (el: any): any => {
  el.addEventListener('scroll', (e: any) => {
    e.target.scrollTop > 150
      ? document.body.classList.add('scroll-blur')
      : document.body.classList.remove('scroll-blur')
  })
}
</script>

<template>
  <div
    class="scroll-container"
    ref="scrollContainer"
    @scroll="debounce(scrollBlur(scrollContainer))"
  >
    <HeroHeader>
      <template #headline>Hey! I'm Sebin</template>
      <template #subline>Web Dev Dragon</template>
    </HeroHeader>

    <main>
      <SiteNav />

      <RouterView v-slot="{ Component }">
        <Transition name="fade" mode="out-in">
          <component :is="Component" :key="$route.path" />
        </Transition>
      </RouterView>
    </main>
  </div>
</template>
