<template>
  <div
    class="flex flex-col justify-center items-center w-50px h-50px cursor-pointer mr-10px hover:bg-bg-tertiary rounded-4px"
    :class="disabled ? 'cursor-not-allowed text-text-secondary' : 'pointer-cursor'"
    @click="handleClick(item)"
  >
    <div class="w-30px h-30px flex items-center justify-center">
      <img
        v-if="typeof item.img === 'string'"
        :src="item.img"
        class="w-24px h-24px"
        :alt="item.label"
      />
      <component v-else :is="item.img" size="20px"></component>
    </div>
    <div class="text-12px">{{ item.label }}</div>
  </div>
</template>

<script setup lang="ts">
import type { VNode } from 'vue'
import { IconType } from 'vue-icons-plus'

export type MenuItemType = {
  type?: string
  key?: string
  label?: string
  img?: string | VNode | IconType
  [key: string]: any
}

const props = defineProps<{
  item: MenuItemType
  disabled?: boolean
  onClick?: (item: MenuItemType) => void
}>()

const emit = defineEmits<{
  (e: 'click', item: MenuItemType): void
}>()

function handleClick(item: MenuItemType) {
  if (props.disabled) return
  emit('click', item)
}
</script>

<style scoped></style>
