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

var ErrorMessage = function ErrorMessage(_ref) {
  var inputId = _ref.inputId,
      error = _ref.error,
      success = _ref.success,
      status = _ref.status;

  var isSuccessful = status === 'success';
  return React.createElement(
    'div',
    {
      htmlFor: inputId,
      'aria-labelledby': inputId,
      className: 'ma__error-msg has-error ' + (isSuccessful ? 'ma__error-msg--success' : ''),
      role: isSuccessful ? 'presentation' : 'alert'
    },
    isSuccessful ? React.createElement(Icon, { name: 'inputsuccess', svgWidth: 16, svgHeight: 18 }) : React.createElement(Icon, { name: 'inputerror', svgWidth: 16, svgHeight: 18 }),
    isSuccessful ? success : error
  );
};

ErrorMessage.propTypes = process.env.NODE_ENV !== "production" ? {
  /** The ID of the corresponding input field */
  inputId: PropTypes.string.isRequired,
  /** The error message for the corresponding input field */
  error: PropTypes.string.isRequired,
  /** The sucess message for the corresponding input field */
  success: PropTypes.string,
  /** Validation status */
  status: PropTypes.oneOf(['error', 'success'])
} : {};

ErrorMessage.defaultProps = {
  status: 'error',
  success: 'Success!'
};

export default ErrorMessage;