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

class Page extends Component {
  static propTypes = {
    /** the content of the page */
    children: PropTypes.any.isRequired,
    /** render the page with a rounded border */
    withBorder: PropTypes.bool,
    className: PropTypes.string,
    variant: PropTypes.oneOf(['fullWidth', 'withBorder', 'flat']),
  };
  static defaultProps = {
    withBorder: false,
    className: null,
    variant: 'fullWidth',
  };

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

    const componentClassName = classnames(
      'Page',
      {
        'Page--withBorder': withBorder || variant === 'withBorder',
        'Page--flat': variant === 'flat',
      },
      className
    );

    return <div className={componentClassName}>{children}</div>;
  }
}

export default Page;