<script setup lang="ts">
import { useMouse } from '@vueuse/core'

const { y } = useMouse()

const showHeader = computed(() => y.value < 50)
const router = useRouter()
const route = useRoute()
</script>

<template>
  <Transition
    name="slide"
    enter-active-class="animate-fade-in-down animate-duration-200 animate-count-1"
    leave-active-class="animate-fade-out-up animate-duration-200 animate-count-1"
  >
    <header v-show="showHeader" class="fixed top-0 w-full p-4 z-10 flex items-center">
      <button
        @click="router.go(-1)"
        class="bg-light-50 dark:bg-dark-400 inline-flex shadow-lg p-2 rounded-full flex font-bold mr-8 pointer"
      >
        <i class="i-carbon-arrow-left"></i>
      </button>
      <a href="/" class="flex font-bold bg-light-50 dark:bg-dark-400 inline-flex shadow-lg px-4 py-2 rounded-full">
        <img src="/public/logo.svg" class="mr-4" alt="" /> {{ route.meta.title }}</a
      >
    </header>
  </Transition>
</template>
