import * as React from 'react';

import s from './FilterBar.module.scss';
import classNames from 'classnames/bind';

const cn = classNames.bind(s);

interface IFilterBarProps {
  children: React.ReactNode;
  color?: string;
}

export default class FilterBar extends React.Component<IFilterBarProps> {
  static defaultProps = {
    color: 'ocean',
  };

  render() {
    const { color, children } = this.props;

    return (
      <div className={cn(s.filterBar, `color-${color}`)}>
        <div className={s.filterBar__container}>
          <div className={s.filterBar__filters}>{children}</div>
        </div>
      </div>
    );
  }
}