import React from 'react';
import { WarningOutlineIcon } from '../../icons';
import colors from '../../theme/colors';
import Typography from '../Typography';
import { Wrapper } from './styles';

type InputFieldErrorProps = {
  message: string;
};

const InputFieldErrorMessage = ({ message }: InputFieldErrorProps) => {
  return (
    <Wrapper>
      <Typography
        variant={'utility4'}
        margin={[8, 0, 0, 0]}
        color={colors.error[700]}
        align="right"
      >
        <WarningOutlineIcon />
        {message}
      </Typography>
    </Wrapper>
  );
};

export default InputFieldErrorMessage;