<template>
  <div class="grid grid-cols-2 gap-8 mb-80">
    <div>
      <BaseMenu label="Using Default Slot" icon="group">
        <BaseMenuItem label="Menu Item 1" href="/item1" icon="user"></BaseMenuItem>
        <BaseMenuItem label="Menu Item 2"></BaseMenuItem>
        <BaseMenuItem label="Menu Item 3"></BaseMenuItem>
        <BaseMenu label="Menu Item 4" dropright>
          <BaseMenuItem label="Menu Item 4.1"></BaseMenuItem>
          <BaseMenuItem label="Menu Item 4.2"></BaseMenuItem>
          <BaseMenuItem label="Menu Item 4.3"></BaseMenuItem>
          <BaseMenu label="Menu Item 4" icon="group" dropright>
            <BaseMenuItem label="Menu Item 4.1"></BaseMenuItem>
            <BaseMenuItem label="Menu Item 4.2"></BaseMenuItem>
            <BaseMenuItem label="Menu Item 4.3"></BaseMenuItem>
          </BaseMenu>
        </BaseMenu>
      </BaseMenu>
    </div>

    <div>
      <BaseMenu label="Using 'items' Prop" icon="group" :items="allItems"></BaseMenu>
    </div>
  </div>

</template>

<script setup>
  import BaseMenu from "@/components/menu/BaseMenu.vue";
  import BaseMenuItem from "@/components/menu/BaseMenuItem.vue";
  import { allItems } from "@/components/menu/examples/example-items.js"

  const handleClick = (e) => { console.log(`Item Clicked ${e}`) }
</script>

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