<script setup lang="ts">
import { storeToRefs } from 'pinia'
import { usePageStore } from '~/stores/pages'

import logo from '~/assets/images/logo.gif'

const pageStore = usePageStore()
const { pages } = storeToRefs(pageStore)

const links = toRaw(pages.value).filter((page) => page.path !== '/')
</script>

<template>
  <nav
    class="flex flex-row flex-wrap lm:flex-row lt:flex-row sm:flex-col lg:flex-row justify-around sm:justify-start lm:justify-between lt:justify-between lg:justify-between gap-2 lg:gap-4"
  >
    <Logo
      :src="logo"
      alt="Endermanch"
      title="Enderman"
      description="official website"
    />
    <ul
      class="flex flex-row flex-wrap items-center sm:items-start lm:items-center lt:items-center lg:items-center justify-center gap-4 m-2 sm:m-0 lm:mx-2 lt:mx-2 lg:mx-2 sm:my-2 lg:my-0"
    >
      <li v-for="(page, index) in links" :key="index" class="nav-item">
        <Route
          :path="page.path"
          :name="page.name"
          :icon="page.icon!.src"
          :alt="page.icon!.alt"
        />
      </li>
    </ul>
  </nav>
</template>
