<template>
  <a
    href="##"
    class="text-reset notification-item d-block"
    @click="$emit('selectTabIndex', index)"
    :style="getBlockInlineStyles"
  >
    <div class="d-flex">
      <div class="avatar-xs me-3">
        <span
          class="avatar-title rounded-circle font-size-16 notification-avatar-2 bg-primary bg-soft text-primary"
        >
          <!-- <i :class="tabIconClasses"></i> -->
          <Icon :icon="detail.icon" />
        </span>
      </div>
      <div class="flex-grow-1">
        <h6 class="mb-1" :style="getSelectedTitleStyles">{{ detail.label }}</h6>
        <div class="font-size-12">
          <p class="mb-1">{{ detail.description }}</p>
        </div>
      </div>
    </div>
  </a>
</template>
<script>
import { Icon } from '@iconify/vue';

export default {
  props: {
    detail: {
      type: Object,
      required: true,
    },
    index: {
      type: Number,
      required: true,
    },
    selectedTabIndex: {
      type: Number,
      required: true,
    },
  },
  computed: {
    tabIconClasses() {
      return `bx ${this.detail.icon}`;
    },
    getBlockInlineStyles() {
      if (this.index === this.selectedTabIndex) {
        return {
          'background-color':
            CURRENT_USER_DETAILS.is_dark_mode === 'True'
              ? '#32394e'
              : '#f6f6f6',
        };
      }
      return {};
    },
    getSelectedTitleStyles() {
      if (this.index === this.selectedTabIndex) {
        return {
          'font-weight': '600',
        };
      }
      return {};
    },
  },
  components: {
    Icon,
  },
};
</script>