import React from 'react';
import classNames from 'classnames';
import enhanceWithClickOutside from 'react-click-outside';

import styles from './Toolbar.Filter.styl';
import Spaced from '../atoms/Spaced';

class FilterBox extends React.Component {
  handleClickOutside(e) {
    this.props.handleClickOutside(e);
  }

  render() {
    const classes = classNames({
      [styles.filterbox]: true,
      [styles.open]: this.props.open
    });
    return (
      <div className={classes}>
        <Spaced horizontal>
          {this.props.children}
        </Spaced>
      </div>
    );
  }
}

export default enhanceWithClickOutside(FilterBox);