<script setup>
import { DropdownMenuItem } from 'radix-vue';
import { computed } from 'vue';
import { cn } from '@/lib/utils';

const props = defineProps({
  disabled: Boolean,
  danger: Boolean,
  class: String,
  as: {
    type: [String, Object],
    default: undefined
  },
  href: String
});

const classes = computed(() => cn(
  'relative flex cursor-pointer select-none items-center rounded-md px-2.5 py-2 text-sm outline-none transition-colors',
  'glass glass-border',
  'hover:bg-white/5 focus:bg-white/5',
  'data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
  props.danger && 'hover:border-red-400/30 hover:text-red-400',
  props.class
));

const elementAs = computed(() => props.as || (props.href ? 'a' : undefined));
</script>

<template>
  <DropdownMenuItem :as="elementAs" :href="href" :disabled="disabled" :class="classes">
    <slot />
  </DropdownMenuItem>
</template>
