<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>
  <li class="flex w-full flex-row" ref="element">
    <a
      class="items-center px-2 py-1 w-full"
      @click.stop.prevent="() => emit('goToNote', element)"
      @mousedown.prevent
      :class="{
        disabled: activeNote?.id === result.id,
        active: props.activeResult?.id === result.id
      }"
    >
      <span class="badge-ghost badge badge-sm mr-0.5" v-if="activeNote?.id === result.id">
        current
      </span>
      <span class="flex-grow overflow-hidden whitespace-nowrap">{{ result.title }}</span>
      <span class="whitespace-nowrap">{{ formatDate(result.modified) }}</span>
    </a>
  </li>
</template>
