<script setup lang="ts">
import type { IntegrationGroup } from '@KTXC/types/integrationTypes';
import NavItem from './LayoutSystemMenuItem.vue';

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

<template>
  <!-- ---------------------------------------------- -->
  <!---Item Childern -->
  <!-- ---------------------------------------------- -->
  <v-list-group no-action>
    <!-- ---------------------------------------------- -->
    <!---Dropdown  -->
    <!-- ---------------------------------------------- -->
    <template v-slot:activator="{ props: activatorProps }">
      <v-list-item v-bind="activatorProps" :value="group.label" rounded class="mb-1" color="primary">
        <!---Icon  -->
        <template v-slot:prepend>
          <v-icon v-if="group.icon" :icon="group.icon"></v-icon>
        </template>
        <!---Title  -->
        <v-list-item-title class="mr-auto">{{ group.label }}</v-list-item-title>
        <!---If Caption-->
        <v-list-item-subtitle v-if="group.caption" class="text-caption mt-n1 hide-menu">
          {{ group.caption }}
        </v-list-item-subtitle>
      </v-list-item>
    </template>
    <!-- ---------------------------------------------- -->
    <!---Sub Item-->
    <!-- ---------------------------------------------- -->
    <template v-for="(subitem, i) in group.items" :key="i">
      <NavItem :item="subitem" :level="(props.level ?? 0) + 1"></NavItem>
    </template>
  </v-list-group>

  <!-- ---------------------------------------------- -->
  <!---End Item Sub Header -->
  <!-- ---------------------------------------------- -->
</template>

