<div id="app"></div>

.searchbox-wrapper {
  margin-bottom: 20px;
  
  .ais-SearchBox__root {
    max-width: inherit;
  }
}

.current-refinements-wrapper {
  margin-bottom: 20px;
}

.facets-wrapper {
 width:40%;
 float: left;
 
 .ais-ClearAll__root {
    margin-bottom: 12px;
  }
}

.results-wrapper {
 width:60%;
 float: left;
}

.hit-wrapper {
  margin-bottom: 12px;
}

const {InstantSearch, ClearAll, Configure, CurrentRefinements, Highlight, Hits, Pagination, RefinementList, SearchBox} = ReactInstantSearch.Dom;

const App = () =>
  <InstantSearch
    appId="latency"
    apiKey="3d9875e51fbd20c7754e65422f7ce5e1"
    indexName="bestbuy"
  >
    <Search />
    <Configure
      query="test"
      facetFilters="category:Headphones"
      attributesToRetrieve={['name']}
      />
  </InstantSearch>

function Search() {
  return (
    <div className="container">
       <div className="current-refinements-wrapper">
        <CurrentRefinements />
      </div>
      <div className="facets-wrapper">
        <ClearAll />
        <RefinementList attributeName="category" />
      </div>
      <div className="results-wrapper">
        <Hits hitComponent={Product} />
        <Pagination />
      </div>
    </div>
  );
}

function Product({hit}) {
  return (
    <div className="hit-wrapper">
      <span className="hit-name">
        <Highlight attributeName="name" hit={hit} />
      </span>
      <span className="hit-shortDescription">
        <Highlight attributeName="shortDescription" hit={hit} />
      </span>
    </div>
  );
};

ReactDOM.render(<App />, document.querySelector('#app'));