import type { ComponentType, SVGAttributes } from 'react'
import { NoteSearchList } from './NoteSearchList'
import './WikilinkSuggestionMenu.css'

export interface WikilinkSuggestionItem {
  title: string
  onItemClick: () => void
  noteType?: string
  typeColor?: string
  typeLightColor?: string
  TypeIcon?: ComponentType<SVGAttributes<SVGSVGElement>>
  aliases?: string[]
  entryTitle?: string
  path?: string
}

interface WikilinkSuggestionMenuProps {
  items: WikilinkSuggestionItem[]
  loadingState: 'loading-initial' | 'loading' | 'loaded'
  selectedIndex: number | undefined
  onItemClick?: (item: WikilinkSuggestionItem) => void
}

export function WikilinkSuggestionMenu({ items, selectedIndex, onItemClick }: WikilinkSuggestionMenuProps) {
  return (
    <div className="wikilink-menu">
        <NoteSearchList
          items={items}
          selectedIndex={selectedIndex ?? 0}
          getItemKey={(item, i) => `${item.title}-${item.path ?? i}`}
          onItemClick={(item) => {
            item.onItemClick()
            onItemClick?.(item)
          }}
          emptyMessage="No results"
        />
    </div>
  )
}
