<script setup lang="ts">
import type { IntegrationItem } from '@KTXC/types/integrationTypes';

const props = defineProps<{ item: IntegrationItem; level?: number }>();
</script>

<template>
  <!---Single Item-->
  <v-list-item
    :to="item.toType === 'external' ? '' : item.to"
    :href="item.toType === 'external' ? item.to : ''"
    rounded
    class="mb-1"
    color="primary"
    :disabled="item.disabled"
    :target="item.toType === 'external' ? '_blank' : ''"
    @mouseenter="$emit && $emit('prefetch', item)"
  >
    <!---If icon-->
    <template v-slot:prepend>
      <v-icon v-if="props.item.icon" :icon="props.item.icon"></v-icon>
    </template>
    <v-list-item-title>{{ item.label }}</v-list-item-title>
    <!---If Caption-->
    <v-list-item-subtitle v-if="item.caption" class="text-caption mt-n1 hide-menu">
      {{ item.caption }}
    </v-list-item-subtitle>
  </v-list-item>
</template>
