import React, {Component} from 'react'
import classNames from 'classnames/bind'

let cx = classNames.bind(require('../styles/field_categories_selector.scss'))

const FieldCategoriesSelector = (props) => (
  <div className={cx('field-categories-selector')}>
    {[
      {name: 'non_exclusive', label: 'Choix multiple'},
      {name: 'comment', label: 'Commentaire'},
    ].map((category) => (
      <div
        key={category.name}
        className={cx('field-categories-selector__category', {'field-categories-selector__category_selected': props.selected == category.name})}
        onClick={() => props.on_select(category.name)}
        >
        {category.label}
      </div>
    ))}
  </div>
)

FieldCategoriesSelector.defaultProps = {
  selected: '',
  on_select(category) {},
}

export default FieldCategoriesSelector