<template>
  <BaseMenuGroup :label="label" :items="items" :headerAs="headerAs" :headerClass="headerClass">
    <slot>
      <template v-for="item in items" :key="item.key">
        <AisMenu v-if="item.items && item.items.length > 0"
                 :label="item.label"
                 :items="item.items"
                 :icon="item.icon"
                 :disabled="item.disabled"
        ></AisMenu>

        <AisMenuItem v-else
                     :as="item.as"
                     :label="item.label"
                     :to="item.to"
                     :href="item.href"
                     :disabled="item.disabled"
                     :icon="item.icon"
                     v-slot="{ active, disabled }"
        ></AisMenuItem>
      </template>
    </slot>
  </BaseMenuGroup>
</template>


<script setup>
    import BaseMenuGroup from "@/components/menu/BaseMenuGroup.vue";
    import AisMenu from "@/components/menu/AisMenu.vue";
    import AisMenuItem from "@/components/menu/AisMenuItem.vue";

    const props = defineProps({
      label: { type: String, default: () => '' },
      items: { type: Array, default: () => [] },
      headerAs: { type: [String], default: () => 'header' },
      headerClass: { type: [String, Array], default: () => '' },
    })
</script>

<script>
export default {
  name: "AisMenuGroup"
}
</script>