<template>
  <RouterLink
    v-if="link"
    :to="{ name: `admin-${link.key}-${!disableSubLink ? link.levelDefault : 'default'}` }"
    class="cursor-pointer w-full flex items-center justify-center self-center"
  >
    <p
      class="cursor-pointer w-full flex flex-col md:flex-row items-center md:gap-2 justify-center p-1 md:rounded-full md:px-3 font-medium text-center text-base self-center"
      :class="
        activeNavigation == link.key
          ? 'text-primary md:bg-primary md:text-white'
          : 'text-gray-700 hover:text-accent md:hover:bg-accent md:hover:text-white'
      "
    >
      {{ link.title }}
    </p>
  </RouterLink>
</template>

<script setup lang="ts">
import { defineComponent, type PropType } from "vue";
import { RouterLink } from "vue-router";
import { useNavigationStore, type topLevelNavigationModel } from "@/stores/admin/navigation";
import { mapState } from "pinia";
</script>

<script lang="ts">
export default defineComponent({
  props: {
    link: {
      type: Object as PropType<topLevelNavigationModel>,
      default: null,
    },
    disableSubLink: {
      type: Boolean,
      default: false,
    },
  },
  computed: {
    ...mapState(useNavigationStore, ["activeNavigation"]),
  },
});
</script>
