<template>
  <div class="flex justify-around gap-4">
    <div>
      <AisDropdown label="Using Default Slot" variant="secondary" size="md" font="sans" rounded>
        <AisMenuItem label="Dropdown Item 1"></AisMenuItem>
        <AisMenuItem label="Dropdown 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="Dropdown Item 3"></AisMenuItem>
      </AisDropdown>
    </div>

    <div>
      <AisDropdown label="Using Items Prop" :items="items" variant="secondary" size="md" font="sans" rounded></AisDropdown>
    </div>
  </div>

</template>

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

  const items = ref([
    { key: 'item1', label: 'Dropdown Item 1' },
    { key: 'item2', label: 'Dropdown 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: 'Dropdown Item 3' },
  ])


</script>

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