<script setup>
import MdrBadge from "./MdrBadge.vue";

defineProps({
  active: Boolean,
  route: String,
  target: {
    type: String,
    required: false,
  },
  disabled: {
    type: Boolean,
    required: false,
  },
  icon: {
    type: String,
    required: false,
  },
  disabledBadgeText: {
    type: String,
    required: false,
  },
});
</script>
<template>
  <li>
    <a
      :href="route"
      :class="`flex items-center text-[#303030] text-sm py-1 pl-3 rounded-lg group cursor-pointer ${
        active ? 'bg-gray-100' : 'bg-white hover:bg-gray-100'
      } ${
        disabled ? 'pointer-events-none text-gray-500' : 'pointer-events-auto'
      }`"
      :target="target"
    >
      <div v-if="icon" class="bg-gray-100 p-1 rounded-lg">
        <component
          :is="`${icon}-icon`"
          class="flex-shrink-0 size-5 transition duration-75"
        />
      </div>

      <slot name="icon" v-else></slot>

      <div class="flex items-center mx-2 w-full">
        <slot />
      </div>

      <MdrBadge class="ml-auto" v-if="disabled">
        {{ disabledBadgeText }}
      </MdrBadge>
    </a>
  </li>
</template>
