import React from 'react';
import PropTypes from 'prop-types';
import './style.css';

var ColoredHeading = function ColoredHeading(coloredHeading) {
  var Element = 'h' + coloredHeading.level;

  var classes = ['ma__colored-heading'];
  if (coloredHeading.color) {
    classes.push('ma__colored-heading--' + coloredHeading.color);
  }
  classes = classes.join(' ');

  return React.createElement(
    Element,
    { className: classes, tabIndex: '-1' },
    coloredHeading.text
  );
};

ColoredHeading.propTypes = process.env.NODE_ENV !== "production" ? {
  /** The heading text  */
  text: PropTypes.string.isRequired,
  /** The heading level */
  level: PropTypes.number,
  /** The color of the heading */
  color: PropTypes.oneOf(['', 'green', 'blue'])
} : {};

ColoredHeading.defaultProps = {
  level: 2,
  color: ''
};

export default ColoredHeading;