text: import { Link } from "gatsby"
  import { default as React } from "react"
  import {
    connectStateResults,
    Highlight,
    Hits,
    Index,
    Snippet,
    PoweredBy,
  } from "react-instantsearch-dom"
  
  const HitCount = connectStateResults(({ searchResults }) => {
    const hitCount = searchResults && searchResults.nbHits
  
    return hitCount > 0 ? (
      <div className="HitCount">
        {hitCount} result{hitCount !== 1 ? `s` : ``}
      </div>
    ) : null
  })
  
  const PageHit = ({ hit }) => (
    <div>
      <Link to={`/blog/` + hit.title}>
        <h4>
          <Highlight attribute="title" hit={hit} tagName="mark" />
        </h4>
      </Link>
      <Snippet attribute="excerpt" hit={hit} tagName="mark" />
    </div>
  )
  
  const HitsInIndex = ({ index }) => (
    <Index indexName={index.name}>
      <HitCount />
      <Hits className="Hits" hitComponent={PageHit} />
    </Index>
  )
  
  const SearchResult = ({ indices, className }) => {
    return (
      <div className={className}>
        {indices.map((index) => (
          <HitsInIndex index={index} key={index.name} />
        ))}
        <PoweredBy />
      </div>
    )
  }
  
  export default SearchResult
  