<script setup lang="ts">
import { activeNote } from '@/composables/useNotes'
import { formatDate } from '@/utils/helpers'

const props = defineProps<{
  result: Note
  activeResult?: Note
}>()

const emit = defineEmits<{
  goToNote: [element: HTMLElement | null]
}>()

const element = ref<HTMLElement | null>(null)
</script>
<template>
  <UIMenuItem
    class="flex w-full items-center"
    @click.stop.prevent="() => emit('goToNote', element)"
    @mousedown.prevent
    :disabled="activeNote?.id === result.id"
    :active="props.activeResult?.id === result.id"
  >
    <UIBadge size="sm" variant="ghost" class="mr-0.5" v-if="activeNote?.id === result.id">current</UIBadge>
    <span class="truncate flex-grow">{{ result.title }}</span>
    <span class="whitespace-nowrap">{{ formatDate(result.modified) }}</span>
  </UIMenuItem>
</template>
