<template>
  <UiParagraph
    class="cursor-pointer"
    as="span"
    size="300"
    v-for="({ path, name, target }, index) in navContent"
    :key="index"
    data-ui="ui-nav"
  >
    <component
      data-ui="ui-nav-btn"
      :is="target ? 'a' : 'RouterLink'"
      :to="path"
      :href="path"
      :target="target"
      >{{ name }}</component
    >
  </UiParagraph>
</template>
<script setup lang="ts">
import UiParagraph from '../Typography/UiParagraph.vue'

interface NavContent {
  name: string
  path: string
  target?: string
}
const { navContent = undefined } = defineProps<{
  navContent: NavContent[] | undefined
}>()
</script>
