<script setup lang="ts">
import { Menu, MenuButton, MenuItem, MenuItems } from "@headlessui/vue";

const props = defineProps<{
  buttonClasses: [string];
  listItems: [[object]];
  align: "left" | "right";
}>();

const emit = defineEmits<{
  (e: "select", data: object): void;
}>();
</script>

<template>
  <Menu as="div" class="relative inline-block text-left">
    <div>
      <MenuButton :class="buttonClasses">
        <slot></slot>
      </MenuButton>
    </div>

    <transition
      enter-active-class="transition duration-100 ease-out"
      enter-from-class="transform scale-95 opacity-0"
      enter-to-class="transform scale-100 opacity-100"
      leave-active-class="transition duration-75 ease-in"
      leave-from-class="transform scale-100 opacity-100"
      leave-to-class="transform scale-95 opacity-0"
    >
      <MenuItems
        class="absolute mt-2 px-6 w-56 w-max-full origin-top-right divide-y divide-gray-500 bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none"
        :class="[align === 'left' ? 'left-0' : 'right-0']"
      >
        <div v-for="section in listItems" :key="section" class="">
          <div v-for="item in section" :key="item" class="px-1 py-1">
            <MenuItem>
              <button
                class="text-black group flex w-full items-center px-0 py-2 text-sm"
                @click="$emit('select', item.data)"
              >
                <span class="inline-block pr-2">
                  <component :is="item.icon" v-if="item.icon"></component>
                </span>
                {{ item.title }}
              </button>
            </MenuItem>
          </div>
        </div>
      </MenuItems>
    </transition>
  </Menu>
</template>
