// @flow
import React from 'react';
import styled from 'styled-components';
import Emoji from 'react-emoji-render';
import ApoliticalBrand from '../../../Theme/ApoliticalBrand';

const { color } = ApoliticalBrand;

type Props = {
    /** This will usually be a string,
 * but this will allow for the inclusion things such as links, formatted paragraphs etc */
    validationMessage: any,
    /** Allows styling overriding */
    className?: any,
};

const Validation = styled.div`
  letter-spacing: 0.4px;
  margin-top: 5px;
  font-size: 14px;
  margin-bottom: 20px;
  border-radius: 3px;
  `;

const ValidationText = styled.div`  
  color: ${({ textColor }) => textColor || `${color.invalidRed}`};
  font-style: italic;
  display: inline-block;
  margin-left: 2px;
`;

const ErrorMessage = ({ validationMessage, className } :Props) => (
  <Validation className={className}>
    <Emoji text="⚠️" /><ValidationText>{validationMessage}</ValidationText>
  </Validation>
);

ErrorMessage.defaultProps = {
  className: '',
};


export default ErrorMessage;