<template>
  <div class="flex">
    <div v-if="!!icon || hasSiblingIcon" :class="iconClasses" class="flex-none text-center">
      <AisIcon v-if="$props.icon" :icon="icon"/>
    </div>

    <div v-if="!iconOnly" class="grow" :class="labelClass"><slot>{{ label }}</slot></div>

    <div v-if="$props.arrowIcon" :class="arrowClasses">
      <AisIcon :icon="arrowIcon" />
    </div>
  </div>
</template>


<script setup>
  import { computed, inject } from "vue";
  import AisIcon from "@/components/icon/AisIcon.vue";
  import { itemLabelProps } from "@/util/item-label-props";

  const hasSiblingIcon = inject('hasSiblingIcon', 0)
  const itemIconClassInjected = inject('itemIconClass', '')
  const iconClassInjected = inject('iconClass', '')

  const props = defineProps({
    ...itemLabelProps
  })

  const iconClasses = computed(() => {
    if(iconClassInjected.value !== undefined)
      return iconClassInjected.value
    if(itemIconClassInjected.value !== undefined)
      return itemIconClassInjected.value

    if(props.iconClass) return props.iconClass

    return ''
  })

  const arrowClasses = computed(() => {
    if(props.arrowClass) return props.arrowClass

    return 'justify-self-end flex-none'
  })
</script>

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