<script setup>
import { DropdownMenuItem } from '@/Components/ui/dropdown-menu';
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
import { cn } from '@/lib/utils';

const props = defineProps({
  icon: {
    type: [String, Object, Array],
    default: null,
  },
  label: {
    type: String,
    required: true,
  },
  danger: {
    type: Boolean,
    default: false,
  },
  disabled: {
    type: Boolean,
    default: false,
  },
});

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

function handleClick(event) {
  if (!props.disabled) {
    emit('click', event);
  }
}
</script>

<template>
  <DropdownMenuItem
    :disabled="disabled"
    :class="
      cn(
        'flex items-center gap-2 cursor-pointer',
        danger && 'text-red-700 focus:text-red-700 focus:bg-red-50',
      )
    "
    @select="handleClick"
  >
    <FontAwesomeIcon
      v-if="icon"
      :icon="icon"
      class="w-4 h-4 flex-shrink-0"
    />
    <span>{{ label }}</span>
  </DropdownMenuItem>
</template>


