<template>
  <div
    v-for="item in projectMenu"
    :key="item.label"
    class="flex flex-col justify-center items-center w-50px h-50px cursor-pointer mr-10px hover:bg-bg-tertiary rounded-4px"
    @click="handleClick(item.key)"
  >
    <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 { inject } from 'vue'
import { LuBoomBox, LuBookOpen } from 'vue-icons-plus/lu'

const onMenuClick = inject<(menuKey: string) => void>('onMenuClick', () => {})

const projectMenu = [
  {
    key: 'custom1',
    label: '自定义1',
    img: LuBoomBox
  },
  {
    key: 'custom2',
    label: '自定义2',
    img: LuBookOpen
  }
]

const handleClick = (menuKey: string) => {
  onMenuClick?.(menuKey)
}
</script>

<style lang="less" scoped></style>
