import React, { Component } from 'react';
import PropTypes from 'prop-types';

class Section extends Component {
  static propTypes = {
    children: PropTypes.any.isRequired,
    theme: PropTypes.oneOf(['transparent', 'blue', 'ink', 'darkGrey', 'paper', 'white']),
    className: PropTypes.string,
  };
  static defaultProps = {
    theme: 'transparent',
    className: null,
  };

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

    let componentClassName = `Section Section--${theme}`;
    componentClassName += className ? ` ${className}` : '';

    return (
      <section className={componentClassName} {...props}>
        <div className="Section-TextConstraint">{children}</div>
      </section>
    );
  }
}

export default Section;