<script setup lang="ts">
interface Link {
  label: string
  to: string
  pending: boolean
  pendingDocs: boolean
  icon?: string
  tags: string[]
}
defineProps<{
  title?: string
  titleIcon?: string
  titleIconClasses?: string
  links: Link[]
  noDivider?: boolean
}>()
</script>

<template>
  <Menu class="w-full">
    <li v-if="!noDivider" />
    <MenuTitle v-if="titleIcon || title" class="flex flex-row items-center gap-3">
      <Icon v-if="titleIcon" :name="titleIcon as string" :class="titleIconClasses as string" />
      {{ title }}
    </MenuTitle>

    <MenuItem v-for="link in links" :key="link.label" :class="{ 'opacity-30': link.pending }">
      <NuxtLink :to="link.to" exact-active-class="menu-active" class="flex flex-row items-center">
        <Icon v-if="link.icon" :name="link.icon" class="w-5 h-5 mr-1" />
        <Text class="flex-grow">
          {{ link.label }}
        </Text>
        <Icon v-if="link.pendingDocs" name="feather:file-text" class="ml-2" />
        <Badge v-if="link.tags.includes('new')" sm soft accent class="ml-2"> new </Badge>
        <!-- <Tooltip v-if="link.tags.includes('examples')" tip="examples done" sm left>
          <Badge sm soft accent>
            ✅
          </Badge>
        </Tooltip> -->
      </NuxtLink>
    </MenuItem>
  </Menu>
</template>
