<template>
  <div class="flex gap-8">
    <div>
      <AisDropdown label="With Divider" variant="secondary" size="md" font="sans" rounded>
        <AisMenuItem label="Menu Item 1"></AisMenuItem>
        <AisMenuItem label="Menu Item 2"></AisMenuItem>
        <AisMenuDivider/>
        <AisMenuItem label="Menu Item 3"></AisMenuItem>
      </AisDropdown>
    </div>
    <div>
      <AisDropdown label="With Divider 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 AisMenuDivider from "@/components/menu/AisMenuDivider.vue";

  const items = ref([
    { key: 'item1', label: 'Menu Item 1' },
    { key: 'item2', label: 'Menu Item 2' },
    { key: 'divider1', type: 'divider' },
    { key: 'item3', label: 'Menu Item 3' },
  ])
</script>

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