<script setup lang="ts">
const { pages } = storeToRefs(usePageStore())

const route = useRoute()
const state = computed(() => {
  const i = pages.value.indexOf(
    pages.value.find(
      (page) => page.path === '/' + route.fullPath.split('/')[1],
    )!,
  )

  return {
    current: route.fullPath,
    index: i,
    next: toRaw(pages.value)[(i + 1) % pages.value.length].path,
    prev: toRaw(pages.value)[i - 1 < 0 ? pages.value.length - (i + 1) : i - 1]
      .path,
  }
})
</script>

<template>
  <div
    class="flex fixed flex-row justify-between items-center w-full h-full pass-through"
  >
    <NuxtLink
      class="opacity-25 hover:opacity-100 text-inherit no-underline transition-all"
      :to="state.prev"
    >
      <iconify-icon icon="iconoir:nav-arrow-left" inline />
    </NuxtLink>

    <NuxtLink class="control-icon text-inherit no-underline" :to="state.next">
      <iconify-icon icon="iconoir:nav-arrow-right" inline />
    </NuxtLink>
  </div>
</template>
