import React, { PropTypes } from 'react';
import { observer } from 'mobx-react';

import Flex from 'components/Flex';

import styles from './SearchField.scss';

@observer
class SearchField extends React.Component {
  static propTypes = {
    onChange: PropTypes.func,
  }

  onChange = (event) => {
    this.props.onChange(event.currentTarget.value);
  }

  render() {
    return (
      <div className={ styles.container }>
        <input
          onChange={ this.onChange }
          className={ styles.field }
          placeholder="Search"
          autoFocus
        />
      </div>
    );
  }
}

export default SearchField;