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

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

      <div :class="`flex items-center mx-2 w-full ${iconMode ? 'hidden' : ''}`">
        <slot />
      </div>
    </a>
  </li>
</template>
