import React from "react";
import PropTypes from "prop-types";
import { ErrorText } from "./ErrorMessage.styled";

const ErrorMessage = (props) => {
  const formik = props.formik;
  return (
    <>
      {formik.errors.password?.length > 0 && formik.touched.password ? (
        <ErrorText>{formik.errors.password}</ErrorText>
      ) : (
        formik.errors.passwordConfirm?.length > 0 &&
        formik.touched.passwordConfirm && (
          <ErrorText>{formik.errors.passwordConfirm}</ErrorText>
        )
      )}
    </>
  );
};

ErrorMessage.propTypes = {
  formik: PropTypes.any,
};

export default ErrorMessage;
