import { error } from "@simplybusiness/icons";
import classNames from "classnames/dedupe";
import { Icon } from "../Icon";
import { TextOrHTML } from "../TextOrHTML";
import "./ErrorMessage.css";

export interface ErrorMessageProps {
  errorMessage?: string;
  id?: string;
  className?: string;
}

export const ErrorMessage = ({
  id,
  errorMessage,
  className,
}: ErrorMessageProps) => {
  const classes = classNames("mobius", "mobius-error-message", className);

  if (!errorMessage) return null;

  return (
    <div id={id} className={classes} data-testid="ErrorMessage" role="alert">
      <Icon
        icon={error}
        className="mobius-error-message__icon"
        aria-hidden="true"
      />
      <TextOrHTML
        elementType="span"
        className="mobius-error-message__text"
        text={errorMessage}
      />
    </div>
  );
};

ErrorMessage.displayName = "ErrorMessage";
