import React, { useState } from 'react'

import { SearchInput, SearchResults } from 'casted-react-search'
import 'casted-react-search/dist/index.css'

const ExampleComponent = () => {
  const [isSearchOpen, setIsSearchOpen] = useState(false)

  // The history value should be pulled in from router library
  const history = null

  return (
    <>
      <SearchInput onClick={() => setIsSearchOpen(true)} />
      <SearchResults
        searchKey='elastic-search-key'
        engineName='elastic-engine-name'
        endpointBase='elastic-endpoint-base'
        history={history}
        onResultClick={() => setIsSearchOpen(false)}
      />
    </>
  )
}