export function WordSuggestions(params: {
  showSuggestions: boolean
  suggestions: string[]
  selectedIndex: number
  onSuggestionClick: (suggestion: string) => void
}): React.ReactElement | null {
  if (!params.showSuggestions || params.suggestions.length === 0) {
    return null
  }
  return (
    <div className="absolute z-10 w-full mt-1 bg-white border border-gray-300 rounded-lg shadow-lg max-h-40 overflow-y-auto">
      {params.suggestions.map((suggestion, idx) => (
        <button
          key={suggestion}
          type="button"
          onClick={() => params.onSuggestionClick(suggestion)}
          className={`w-full text-left px-3 py-2 hover:bg-gray-100 ${idx === params.selectedIndex ? 'bg-gray-100' : ''}`}
        >
          {suggestion}
        </button>
      ))}
    </div>
  )
}