<script setup>
import { ref } from 'vue';
import Dropdown from '../Dropdown.vue';
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
import { faEllipsisVertical } from '@fortawesome/free-solid-svg-icons';

const props = defineProps({
  align: {
    type: String,
    default: 'right', // left, right
    validator: (v) => ['left', 'right'].includes(v),
  },
  size: {
    type: String,
    default: 'md', // sm, md
    validator: (v) => ['sm', 'md'].includes(v),
  },
});

const sizeClasses = {
  sm: 'h-6 w-6',
  md: 'h-8 w-8',
};

const emit = defineEmits(['action']);

function handleAction(action) {
  emit('action', action);
  if (action.onClick) {
    action.onClick();
  }
}
</script>

<template>
  <Dropdown :align="align" :content-classes="['py-1']">
    <template #trigger>
      <button
        type="button"
        :class="[
          'inline-flex items-center justify-center rounded-full text-gray-400 hover:text-gray-600 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-1 transition-colors',
          sizeClasses[size],
        ]"
        aria-label="Actions"
      >
        <FontAwesomeIcon :icon="faEllipsisVertical" class="h-4 w-4" />
      </button>
    </template>
    <template #content>
      <slot :handle-action="handleAction" />
    </template>
  </Dropdown>
</template>


