import { FaExclamationTriangle } from "react-icons/fa";

type FormHelperTextProps = {
  text: string[];
  forceDarkMode?: boolean;
};

function FormError({ text, forceDarkMode }: FormHelperTextProps) {
  return (
    <span
      aria-atomic 
      aria-live="assertive" // the error is announced immediately
      className={`font-noto text-sm text-red-800 ${
        forceDarkMode && "dark:text-red-700"
      } font-semibold flex items-center`}
      role="alert"
    >
      <FaExclamationTriangle aria-hidden className="me-1" />
      <p>{text.join("; ")}</p>
    </span>
  );
}

export default FormError;