<script setup>
defineProps({
  active: Boolean,
  route: String,
  target: {
    type: String,
    required: false,
  },
  disabled: {
    type: Boolean,
    required: false,
  },
});
</script>
<template>
  <li>
    <a
      :href="route"
      :class="`flex items-center font-light text-base hover:text-[#303030] py-1 pl-3 rounded-lg cursor-pointer ${
        active
          ? 'bg-white text-[#303030]'
          : 'hover:bg-white text-[#616161]'
      } ${
        disabled ? 'pointer-events-none text-gray-500' : 'pointer-events-auto'
      }`"
      :target="target"
    >

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