import React from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';

import Column from './Column';
import Row from './Row';
import BlocksWrapper from './BlocksWrapper';

import './section.scss';

const propTypes = {
  /** @ignore */
  className: PropTypes.string,
  component: PropTypes.string,
  size: PropTypes.oneOf(['xs', 'sm', 'md', 'lg', 'full']),
  marginBottom: PropTypes.bool,
  marginTop: PropTypes.bool,
  clearFix: PropTypes.bool,
  /** @deprecatad use "size" instead */
  maxSize: PropTypes.oneOf(['xs', 'sm', 'md', 'lg', 'full'])
};

const defaultProps = {
  className: undefined,
  component: 'section',
  size: 'lg',
  maxSize: 'lg', // deprecated
  marginBottom: false,
  marginTop: false,
  clearFix: false
};

const Section = ({ className, clearFix, component: Component, marginBottom, marginTop, size, maxSize, ...props }) => (
  <Component
    className={className}
    styleName={classNames('base', {
      [`size-${size || maxSize}`]: size || maxSize,
      'with-margin-bottom': marginBottom,
      'with-margin-top': marginTop,
      'clear-fix': clearFix
    })}
    {...props}
  />
);

Section.propTypes = propTypes;
Section.defaultProps = defaultProps;
Section.Column = Column;
Section.Row = Row;
Section.BlocksWrapper = BlocksWrapper;

export default Section;
