<script setup lang="ts">
import { ref, reactive, computed, onMounted } from 'vue'
import { CCMDIcon } from '../..'
import { useRouter } from 'vue-router'

const props = defineProps<{
  items: {
    text: string
    path?: string
  }[]
}>()

const router = useRouter()

function jumpTo(path: string | undefined) {
  if (path) {
    router.push(path)
  }
}
</script>

<template>
  <div class="pankuzu">
    <div v-for="item in items" :key="item.text" class="item">
      <div @click="jumpTo(item.path)" class="pointer">
        {{ item.text }}
      </div>
      <CCMDIcon v-if="item !== items[items.length - 1]" name="chevron_right"></CCMDIcon>
    </div>
  </div>
</template>

<style lang="sass" scoped>
.pankuzu
  display: flex
  gap: 14px
  align-items: center

.item
  display: flex
  gap: 14px
  font-size: 14px
  align-items: center

.pointer
  cursor: pointer
</style>
