import { faExclamationCircle } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import React from "react";

interface ValidationErrorIconProps {
  visible: boolean;
  reserveSpace?: boolean;
}

const ValidationErrorIcon: React.FC<ValidationErrorIconProps> = ({
  visible,
  reserveSpace = false,
}) => {
  if (!visible && !reserveSpace) return null;

  const wrapperClassName = reserveSpace
    ? "validation-error-icon validation-error-icon--reserve-space"
    : "validation-error-icon";

  return (
    <span className={wrapperClassName} aria-hidden={!visible}>
      {visible && (
        <span className="error-icon">
          <FontAwesomeIcon icon={faExclamationCircle} />
        </span>
      )}
    </span>
  );
};

export default ValidationErrorIcon;