import React from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import Icon from '../../base/Icon';
import './style.css';

var CalloutAlert = function CalloutAlert(props) {
  var _classNames;

  var calloutAlertClasses = classNames((_classNames = {
    'ma__callout-alert': true
  }, _classNames['ma__callout-alert--' + props.theme] = props.theme, _classNames));

  var calloutAlertContentClasses = classNames({
    'ma__callout-alert__content': true,
    'ma__callout-alert__content--no-icon': !(props.icon && props.icon.name)
  });

  return React.createElement(
    'div',
    { className: calloutAlertClasses },
    React.createElement(
      'div',
      { className: calloutAlertContentClasses },
      props.icon && React.createElement(
        'div',
        { className: 'ma__callout-alert__icon' },
        React.createElement(Icon, props.icon)
      ),
      props.children
    )
  );
};

CalloutAlert.propTypes = process.env.NODE_ENV !== "production" ? {
  icon: PropTypes.shape(Icon.propTypes),
  /** Themes correspond to site color scheme i.e. sass variables */
  theme: PropTypes.oneOf(['', 'c-primary', 'c-primary-alt', 'c-highlight', 'c-gray-dark', 'c-error-red']),
  children: PropTypes.oneOfType([PropTypes.element, PropTypes.array])
} : {};

CalloutAlert.defaultProps = {
  icon: { name: 'alert' }
};

export default CalloutAlert;