<script setup lang="ts">
import { defineProps } from 'vue'
import { Button } from 'ant-design-vue'
import { useGo } from '@/hooks/web/usePage'

const props = defineProps({
  menu: {
    type: Object,
    required: true,
  },
  level: {
    type: Number,
    default: 0,
  },
})

const go = useGo()
</script>

<template>
  <div class="menu-item">
    <Button @click="go(props.menu.path)">
      {{ props.menu.meta?.title || props.menu.name }}
    </Button>
    <!--    <div v-if="props.menu.children && menu.children.length"> -->
    <!--      <template v-for="child in props.menu.children" :key="child.id"> -->
    <!--        <KdMenuItem :menu="child" :level="level + 1" /> -->
    <!--      </template> -->
    <!--    </div> -->
  </div>
</template>

<style scoped>
.menu-item {
  display: flex;
  gap: 8px;
  align-items: center;
}
</style>
