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

const props = defineProps<{
  hideable: boolean
}>()
const { y } = useMouse()

const showHeader = computed(() => y.value < 50 || !props.hideable)
</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 bg-light-50 dark:bg-dark-400 shadow-lg p-4 z-10">
      <div class="flex justify-end container mx-auto">
        <a href="/" class="absolute left-4 flex font-bold"> <img src="/public/logo.svg" class="mr-4" alt="" /> Tres</a>
        <div class="flex justify-between w-75px">
          <a href="https://github.com/alvarosabu/tres" target="_blank"><i class="i-tabler-brand-github"></i></a>
          <div class="dropdown dropdown-end">
            <label tabindex="0" class="cursor-pointer"><i class="i-tabler-info-circle"></i></label>
            <div tabindex="0" class="mt-8 w-90 sm:w-96 dropdown-content p-8 shadow bg-base-100 rounded-box prose">
              <p>
                This repository serves as a playground for experiments using
                <a class="link" href="https://threejs.org/"> <i class="i-logos-threejs"></i> ThreeJS</a> inside
                <a class="link" href="https://vuejs.org/"><i class="i-logos-vue"></i>VueJS</a>
              </p>
              <p>
                Powered by <a class="link" href="https://vitejs.dev/"><i class="i-logos-vitejs"></i>ViteJS</a>
              </p>

              <p>Made by <a class="link" href="https://github.com/alvarosabu"> Alvaro Saburido</a></p>
              <p>Copyright © 2022-present</p>
            </div>
          </div>
        </div>
      </div>
    </header>
  </Transition>
</template>
