import type { Ref } from 'vue'

/**
 * Composable for bolding search query matches in text
 * @param searchTerm - Reactive search term (Ref<string>)
 * @returns Function that takes text and returns HTML with matched query bolded
 */
export function useBoldQuery(searchTerm: Ref<string>) {
  const boldQuery = (text: string): string => {
    const query = searchTerm.value.trim()
    if (!query) return text

    const lowerText = text.toLowerCase()
    const lowerQuery = query.toLowerCase()
    const matchIndex = lowerText.indexOf(lowerQuery)

    if (matchIndex === -1) return text

    const beforeMatch = text.substring(0, matchIndex)
    const match = text.substring(matchIndex, matchIndex + query.length)
    const afterMatch = text.substring(matchIndex + query.length)

    return `${beforeMatch}<b>${match}</b>${afterMatch}`
  }

  return {
    boldQuery,
  }
}