'use strict';

exports.__esModule = true;

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _propTypes = require('prop-types');

var _propTypes2 = _interopRequireDefault(_propTypes);

var _SiteLogo = require('../../atoms/media/SiteLogo');

var _SiteLogo2 = _interopRequireDefault(_SiteLogo);

var _Placeholder = require('../../atoms/Placeholder');

var _Placeholder2 = _interopRequireDefault(_Placeholder);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

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 _react2.default.createElement(
    'main',
    { id: 'main-content', className: classNames, tabIndex: '-1' },
    _react2.default.createElement(
      'header',
      { className: 'ma__narrow-template__header' },
      _react2.default.createElement(_SiteLogo2.default, narrowTemplate.siteLogoDomain)
    ),
    _react2.default.createElement(
      'div',
      { className: 'ma__narrow-template__container' },
      _react2.default.createElement(
        'div',
        { className: 'ma__narrow-template__content' },
        narrowTemplate.children ? narrowTemplate.children : _react2.default.createElement(_Placeholder2.default, { text: 'Page Content' })
      )
    )
  );
};

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

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

exports.default = NarrowTemplate;
module.exports = exports['default'];