import { Button, Card } from '../ui'

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 (
    <Card variant="default" className="absolute z-10 w-full mt-1 bg-white border-gray-300 shadow-lg max-h-40 overflow-y-auto">
      {params.suggestions.map((suggestion, idx) => (
        <Button
          key={suggestion}
          type="button"
          variant="ghost"
          onClick={() => params.onSuggestionClick(suggestion)}
          className={`w-full text-left justify-start ${idx === params.selectedIndex ? 'bg-gray-100' : ''}`}
        >
          {suggestion}
        </Button>
      ))}
    </Card>
  )
}