import TagLink from '@/components/TagLink'
import { cn } from '@/lib/utils'

import type { FC } from 'react'

import type { Tag } from '@/types'

type Props = { suggestions: Tag[]
	       activeIndex: number
	       onSelect:    (tag: Tag) => void }


const TagSearchBox: FC<Props> = ({ suggestions, activeIndex, onSelect }) => {
  if (suggestions.length === 0)
    return

  return (
      <ul className="absolute left-0 right-0 z-50 w-full
		     bg-gray-100 dark:bg-gray-800 border dark:border-gray-600
		     rounded shadow">
	{suggestions.map ((tag, i) => (
	    <li key={tag.id}
		className={cn ('min-w-0 overflow-hidden px-3 py-2 cursor-pointer hover:bg-gray-300 dark:hover:bg-gray-700',
			       i === activeIndex && 'bg-gray-300 dark:bg-gray-700')}
		onMouseDown={() => onSelect (tag)}>
	      <div className="flex min-w-0 max-w-full items-baseline overflow-hidden">
		<TagLink tag={tag} linkFlg={false} withWiki={false}/>
	      </div>
	    </li>))}
      </ul>)
}

export default TagSearchBox
