<script setup>
const assetUrl = window.gcargo.assets_url;

defineProps({
  active: {
    type: Boolean,
    default: false,
  },
  icon: {
    type: String,
    required: true,
  },
  newBadge: {
    type: Boolean,
    default: false,
  },
  isBusiness: {
    type: Boolean,
    default: false,
  },
  disabled: {
    type: Boolean,
    default: false,
  },
  hidden: {
    type: Boolean,
    default: false,
  },
});
</script>
<template>
  <div
    :class="`relative py-4 pl-8 border-l-4 border-b  flex items-center font-medium text-sm
   ${
     active ? ' bg-white border-l-blue-800' : ' border-l-[#FAFAFA] bg-[#FAFAFA]'
   }
    ${disabled ? ' cursor-not-allowed' : ' cursor-pointer'}
    ${hidden ? 'hidden' : ''}
    `"
  >
    <img
      class="w-5 h-5 mr-3 text-blue-600"
      :src="`${assetUrl}/images/settings/${icon}.svg`"
      alt=""
    />
    <div
      :class="`${
        active ? ' text-blue-800 font-bold' : 'text-[#6E778A]'
      } flex gap-2 w-full items-center `"
    >
      <slot />
      <div
        v-if="isBusiness"
        class="text-slate-600 bg-slate-200 text-sm font-medium mr-2 px-2.5 py-0.5 rounded-lg flex gap-1 items-center h-6 max-h-max"
      >
        <lock-closed-icon v-if="disabled" class="w-3 h-3" />
        <span>Business</span>
      </div>
    </div>

    <div
      v-if="newBadge"
      class="text-white py-2 px-1 text-center text-[12px] absolute top-0 right-1 rounded-b-full"
      style="
        background-color: #0056ff;
        background-image: linear-gradient(19deg, #0056ff 30%, #b721ff 100%);
      "
    >
      {{ $t("new") }}
    </div>
  </div>
</template>
