<template>
  <div class="outer mobileOrTablet">
    <nuxt-link
      v-for="tabbarRoute of routesC"
      :key="tabbarRoute.to.path"
      :to="tabbarRoute.to"
      :style="{ textDecoration: 'none' }"
    >
      <n-button
        text
        :focusable="false"
        aria-label="tabbar-link-item"
        :type="tabbarRoute.to.path === route.path ? 'primary' : 'default'"
      >
        <div class="inner-item">
          <naive-icon
            :name="
  tabbarRoute.to.path === route.path ? tabbarRoute.iconSelected : tabbarRoute.iconUnselected
"
            :size="iconSize"
          />
          <n-text
            :type="tabbarRoute.to.path === route.path ? 'primary' : 'default'"
          >
            {{ tabbarRoute.label }}
          </n-text>
        </div>
      </n-button>
    </nuxt-link>
  </div>
</template>

<script setup>
import { computed, useRoute, useThemeVars, useRouter } from "#imports";
import { NuxtLink, NaiveIcon } from "#components";
const props = defineProps({
  routes: { type: Array, required: false, default: () => [] },
  iconSize: { type: [Number, String], required: false, default: 24 }
});
const naiveTheme = useThemeVars();
const route = useRoute();
const router = useRouter();
const routesC = computed(() => props.routes.map((r) => ({
  label: r.label,
  iconSelected: r.iconSelected,
  iconUnselected: r.iconUnselected,
  to: router.resolve(r.to)
})));
const backgroundColor = computed(() => naiveTheme.value.bodyColor);
</script>

<style scoped>
.outer{background-color:v-bind(backgroundColor);bottom:0;box-shadow:0 0 2px 0 #a3a3a3;box-sizing:border-box;height:56px;position:sticky;width:100vw;z-index:100}.inner-item,.outer{align-items:center;display:flex;gap:0;justify-content:space-around}.inner-item{flex-direction:column;font-size:small}
</style>
