<script setup>
import { ref } from "vue";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuTrigger,
} from "@/Components/ui/dropdown-menu";
import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
import { faEllipsisVertical } from "@fortawesome/free-solid-svg-icons";
import Button from "../ui/button/Button.vue";

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>
  <DropdownMenu>
    <DropdownMenuTrigger as-child>
      <Button variant="ghost" size="icon" aria-label="Actions">
        <FontAwesomeIcon :icon="faEllipsisVertical" class="h-4 w-4" />
      </Button>
    </DropdownMenuTrigger>
    <DropdownMenuContent :align="align === 'right' ? 'end' : 'start'" class="py-1">
      <slot :handle-action="handleAction" />
    </DropdownMenuContent>
  </DropdownMenu>
</template>
