<script setup lang="ts">
import { setActiveNote } from '@/composables/useNotes'
const props = defineProps<{
  references: Note[]
}>()
</script>
<template>
  <UIMenu class="mt-3 rounded-xl border-[1px] px-3 py-3" v-if="props.references.length > 0">
    <UIMenuItem :title="true">
      <span>References</span>
      <UIBadge variant="outline" class="ml-2">{{ props.references.length }}</UIBadge>
    </UIMenuItem>
    <UIMenuItem
      v-for="reference in props.references"
      :key="reference.id"
      @click="setActiveNote(reference.id)"
    >
      <i class="far fa-file-alt fa-fw" />
      {{ reference.title }}
    </UIMenuItem>
  </UIMenu>
</template>
