<script lang="ts" setup>
import { MenuItem } from 'ant-design-vue'
import { computed, getCurrentInstance } from 'vue'
import { propTypes } from '@/utils/propTypes'

defineOptions({ name: 'DropdownMenuItem' })

const props = defineProps({
  // eslint-disable-next-line vue/no-reserved-props
  key: propTypes.string,
  text: propTypes.string,
  icon: propTypes.string,
})

const instance = getCurrentInstance()
const itemKey = computed(() => props.key || instance?.vnode?.props?.key)
</script>

<template>
  <MenuItem :key="itemKey">
    <span class="flex items-center">
      <span :class="icon" class="mr-1" />
      <span>{{ text }}</span>
    </span>
  </MenuItem>
</template>