import React, {Component} from 'react'
import styled from 'styled-components'
import MoreButton from 'components/more_button'
import classNames from 'classnames/bind'

const cx = classNames.bind(require('../styles/field.scss'))

export default ({category, edit_mode, editable, empty, className, show_label, show_options, options, name, children}) => (
  <div className={cx('field', `field_category_${category}`, `field_edit-mode_${edit_mode}`, {'field_editable': editable}, className)}>
    {show_label ? (
      <Header>
        <div className={cx('field__title', {'field__title_empty': !name})}>
          {name || "Champ sans nom"}
        </div>
        {show_options ? (
          <MoreButton {...options} />
        ) : null}
      </Header>
    ) : null}
    {children}
  </div>
)

const Header = styled.div`
  display: flex;
  align-items: center;

  & > * {
    margin-right: 10px;
  }
`