import { FC } from "react";
import ErrorIcon from "@mui/icons-material/Error";
import { ValidateMessageNewProps } from "@/widgetLibrary/PublicSector/InvalidMessage/interface";
import { invalidateMessageCss } from "./style";
import { css } from "@emotion/react";

export const InvalidMessage: FC<ValidateMessageNewProps> = (props) => {
  const { validateMessage } = props;

  return (
    <span css={invalidateMessageCss}>
      {typeof validateMessage === "string" && validateMessage.length > 0 && (
        <ErrorIcon fontSize="small" sx={{ fontSize: "15px" }} />
      )}
      {validateMessage}
    </span>
  );
};
