<template>
  <div class="grid grid-cols-3 gap-4">
    <div>
      <AisMenu label="Menu Using Group">
        <AisMenuItem label="Menu Item 1"></AisMenuItem>
        <AisMenuItem label="Menu Item 2"></AisMenuItem>

        <AisMenuGroup label="Group 1" header-class="text-sm font-bold">
          <AisMenuItem label="Group 1 Item 1"></AisMenuItem>
          <AisMenuItem label="Group 1 Item 2"></AisMenuItem>
          <AisMenuItem label="Group 1 Item 3"></AisMenuItem>
        </AisMenuGroup>

        <AisMenuGroup label="Group 2" header-class="text-sm font-bold">
          <AisMenuItem label="Group 2 Item 1"></AisMenuItem>
          <AisMenuItem label="Group 2 Item 2"></AisMenuItem>
          <AisMenuItem label="Group 2 Item 3"></AisMenuItem>
        </AisMenuGroup>

        <AisMenuItem label="Menu Item 3"></AisMenuItem>
      </AisMenu>
    </div>
  </div>

</template>

<script setup>
  import { ref } from 'vue'
  import AisMenu from "@/components/menu/AisMenu.vue";
  import AisMenuItem from "@/components/menu/AisMenuItem.vue";
  import AisMenuGroup from "@/components/menu/AisMenuGroup.vue";

  const items = ref([
    { key: 'item1', label: 'Menu Item 1' },
    { key: 'item2', label: 'Menu Item 2' },
    { key: 'group1',
      type: 'group',
      label: 'Group 1',
      headerClass: 'text-gray-400 font-bold',
      items: [
        { key: 'group1Item1', label: 'Group 1 Item 1' },
        { key: 'group1Item2', label: 'Group 1 Item 2' },
        { key: 'group1Item3', label: 'Group 1 Item 3' },
      ]
    },
    { key: 'group2',
      type: 'group',
      label: 'Group 2',
      headerClass: 'text-gray-400 font-bold',
      items: [
        { key: 'group2Item1', label: 'Group 2 Item 1' },
        { key: 'group2Item2', label: 'Group 2 Item 2' },
        { key: 'group2Item3', label: 'Group 2 Item 3' },
      ]
    },
    { key: 'item3', label: 'Menu Item 3' },
  ])


</script>

<script>
export default {
  name: "AisMenuGroupExample",
}
</script>