<template>
  <div>
    <div class="flex" :class="itemClass">
      <div class="grow">
        <slot name="header">
          <component :is="headerAs" :class="headerClass">{{ label }}</component>
        </slot>
      </div>
    </div>
    <slot name="default">
      <template v-for="item in items" :key="item.key">
        <BaseMenu v-if="item.items && item.items.length > 0"
                 :label="item.label"
                 :items="item.items"
                 :icon="item.icon"
                 :class="item.class"
                 :button-class="item.buttonClass"
                 :active-class="item.activeClass"
                 :item-class="item.itemClass"
                 :items-class="item.itemsClass"
                 :as="'template'"
                 :item-as="item.itemAs"
                 :items-as="item.itemsAs"
                 :disabled="item.disabled"
        ></BaseMenu>

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


<script setup>
    import BaseMenu from "@/components/menu/BaseMenu.vue";
    import BaseMenuItem from "@/components/menu/BaseMenuItem.vue";
    import { inject } from "vue";

    const itemClass = inject('itemClass', 0)

    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: "BaseMenuGroup"
}
</script>