<script setup>
import { twMerge } from "tailwind-merge";
import { defineProps } from "vue";

const props = defineProps({
  open: Boolean,
  items: Array,
  title: String,
  onClick: Function,
});
</script>

<template>
  <div :class="twMerge('dropdown', open ? 'dropdown-open' : 'dropdown-close')">
    <slot name="dropdownButton"></slot>

    <ul
      tabindex="0"
      class="dropdown-content flex flex-col items-center justify-between px-3 text-base translate-y-2 z-50 py-3 shadow rounded min-w-max bg-[#4c625e] border text-center"
    >
      <li v-for="(item, index) in items" :key="item.key" class="w-full py-0">
        <slot name="dropdownItem" v-bind="{ record: item, index }"></slot>
      </li>
      <slot name="dropdownAction"></slot>
    </ul>
  </div>
</template>

<style lang="scss" scoped></style>
