<script setup lang="ts">
import newsIcon from "@/assets/img/ico/news.png";

const CategoryStore = useCategoryStore();
const nuxtApp = useNuxtApp();
const isClient = !nuxtApp.ssrContext;
</script>

<template>
  <div class="a-nav">
    <NuxtLink to="/">Home</NuxtLink>
    <a :href="useRuntimeConfig().public.clubUrl" class="linkToClub">
      <NuxtImg src="https://io.house-tk.com/hop/pro/other/images/c1984cf6ce91c6909525d12e77577f5d" style="width: 0px" />
    </a>
  </div>
  <ul>
    <li class="d-flex align-center categoryTitle">
      <a href="javascript:;">Product Categories</a>
    </li>
    <li v-for="item in CategoryStore.Category" :key="item.id" class="d-flex align-center">
      <NuxtLink :to="{ path: '/category', query: { code: item.id, cname: item.name, pageNum: 1, pageSize: 20 } }">
        <div class="c_icon" style="opacity: 0">
          <template v-if="item.unselectedIcon">
            <NuxtImg
              class="icon-img icon-img-no"
              :src="item.unselectedIcon"
              :loading="isClient ? 'lazy' : 'eager'"
              :placeholder="isClient ? 'https://io.house-tk.com/hop/pro/other/images/cd6fddec6ee4f5be04d29a934a0c05a4' : undefined"
            ></NuxtImg>
            <NuxtImg
              class="icon-img icon-img-hover"
              :src="item.icon"
              :loading="isClient ? 'lazy' : 'eager'"
              :placeholder="isClient ? 'https://io.house-tk.com/hop/pro/other/images/cd6fddec6ee4f5be04d29a934a0c05a4' : undefined"
            ></NuxtImg>
          </template>
        </div>
        {{ item.name }}
      </NuxtLink>
    </li>
  </ul>
</template>
