import React from 'react';
import PropTypes from 'prop-types';
import SiteLogo from '../../atoms/media/SiteLogo';
import Placeholder from '../../atoms/Placeholder';

var NarrowTemplate = function NarrowTemplate(narrowTemplate) {
  var sideClass = narrowTemplate.side ? ' ma__narrow-template--' + narrowTemplate.side : '';
  var colorClass = narrowTemplate.color ? ' ma__narrow-template--' + narrowTemplate.color : '';
  var classNames = 'ma__narrow-template' + sideClass + colorClass;
  return React.createElement(
    'main',
    { id: 'main-content', className: classNames, tabIndex: '-1' },
    React.createElement(
      'header',
      { className: 'ma__narrow-template__header' },
      React.createElement(SiteLogo, narrowTemplate.siteLogoDomain)
    ),
    React.createElement(
      'div',
      { className: 'ma__narrow-template__container' },
      React.createElement(
        'div',
        { className: 'ma__narrow-template__content' },
        narrowTemplate.children ? narrowTemplate.children : React.createElement(Placeholder, { text: 'Page Content' })
      )
    )
  );
};

NarrowTemplate.propTypes = process.env.NODE_ENV !== "production" ? {
  /** Align the template to the right or to the left */
  side: PropTypes.oneOf(['right', 'left']),
  /** Secondary color is yellow or green */
  color: PropTypes.oneOf(['yellow', 'green']),
  /** The domain you want to send users to from the site logo icon */
  siteLogoDomain: PropTypes.shape(SiteLogo.propTypes)
} : {};

// Only set defaults for the configuration variables which need to be opted in to activate.
NarrowTemplate.defaultProps = {
  side: 'right',
  color: 'yellow'
};

export default NarrowTemplate;