<script setup lang="ts">
const target = ref(null);
const { directions, y, arrivedState } = useScroll(window);

const motionInstance = useMotion(target, {
  initial: {
    y: 0,
    transition: {
      type: "keyframes",
    },
  },
  hidden: {
    y: -60,
    transition: {
      type: "keyframes",
    },
  },
});

const throttledApply = useThrottleFn((state: string) => {
  return motionInstance.apply(state);
}, 300);

watchEffect(() => {
  if (arrivedState.top) {
    motionInstance.apply("initial");
    return;
  }

  if (directions.top) {
    throttledApply("initial");
    return;
  }

  if (directions.bottom && y.value > 100) {
    throttledApply("hidden");
    return;
  }
});
</script>

<template>
  <div
    ref="target"
    class="border-b border-b-gray-200 dark:border-none dark:border-b-slate-600 top-0 bg-white z-10 dark:bg-slate-800 bg-opacity-85 dark:bg-opacity-90 backdrop-blur-sm sticky"
  >
    <UContainer class="grid grid-cols-2 items-center gap-3 !py-2 max-w-3xl" as="nav">
      <ULink to="/" class="flex gap-3 items-center">
        <nuxt-img
          placeholder
          alt="Marios Antonoudiou"
          src="mariosant.webp"
          class="w-10 h-10 rounded-full border border-gray-200  dark:border-gray-800 dark:bg-slate-300 block"
        />
        <div class="font-bold text-slate-800 dark:text-white">Marios Antonoudiou</div>
      </ULink>
      <div
        class="flex gap-3 items-center justify-end text-slate-600 dark:text-slate-400"
      >
        <ULink
          to="/"
          class="font-semibold text-sm underline-offset-4"
          activeClass="text-slate-900 dark:text-slate-200 underline"
          >Home</ULink
        >

        <ULink
          to="/articles"
          class="font-semibold text-sm underline-offset-4"
          activeClass="text-slate-900 dark:text-slate-200 underline"
          >Articles</ULink
        >
      </div>
    </UContainer>
  </div>
</template>
