const SearchBar = ({ searchQuery }) => 
  <Card>
    <div className={styles.searchFieldContainer}>
      <div className={styles.field}>
        <input type="text" onChange={(event)=> searchQuery(event.target.value)} placeholder="Search for items or sellers" />
      </div>
      <Button className={styles.searchButton}>
        Search
      </Button>
    </div>
  </Card>

const mapStateToProps = () => {
  return {

  }
} 

const mapDispatchToProps = (dispatch) => {
  return {
    searchQuery: (val) => dispatch(searchQuery(val))
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(SearchBar);