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

defineProps<{
  buttonClasses: [string] | [];
  listItems: DropdownListItem[];
  align: "left" | "right";
}>();

const emit = defineEmits<{
  (e: "select", data: any): 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="w-max-full absolute mt-2 w-56 origin-top-right divide-y divide-gray-500 bg-white px-6 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none"
        :class="[align === 'left' ? 'left-0' : 'right-0']"
      >
        <div v-for="item in listItems" :key="item.title" class="px-1 py-1">
          <MenuItem>
            <button
              class="group flex w-full items-center px-0 py-2 text-sm text-black"
              @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>
      </MenuItems>
    </transition>
  </Menu>
</template>
