type SearchResultItem = {
  result_type: string
  slug: string
  name: string
  detail?: string
}

type SearchDropdownProps = {
  isOpen: boolean
  results: SearchResultItem[]
  onSelect: (type: string, slug: string) => void
}

export function SearchDropdown({ isOpen, results, onSelect }: SearchDropdownProps) {
  return (
    <div className={`search-dropdown${isOpen ? ' open' : ''}`}>
      {results.map((r) => (
        <div
          key={`${r.result_type}:${r.slug}`}
          className="search-result"
          onClick={() => onSelect(r.result_type, r.slug)}
        >
          <span className="sr-type">{r.result_type}</span>
          {r.name}
          {r.detail ? <span className="sr-detail">{r.detail}</span> : null}
        </div>
      ))}
    </div>
  )
}