<template>
  <AisLink v-if="$props.href || $props.to" :href="href" :to="to" class="hover:no-underline">
    <AisItemLabel :label="label" :icon="icon" :class="itemClass"/>
  </AisLink>

  <div v-else class="relative inline-block" @click="handleClick(label)">
    <AisItemLabel :label="label" :icon="icon" :class="itemClass"/>
  </div>
</template>

<script setup>
  import AisLink from "@/components/link/AisLink.vue";
  import { linkProps } from "@/components/link/link-props";
  import { iconProps } from "@c/icon/ais-icons";
  import { inject } from 'vue';
  import AisItemLabel from "@/components/item-label/AisItemLabel.vue";

  const itemClass = inject('itemClass', '')

  const emit = defineEmits(['click'])

  const props = defineProps({
    ...linkProps,
    ...iconProps,
  })

  const handleClick = (e) => { emit('click', e) }
</script>

<script>
export default {
  name: "AisNavbarItem"
}
</script>