import { m } from "framer-motion";

import Icon from "@/components/icon";

import styles from "./styles.module.scss";

const ErrorLabel = ({
  text,
  input,
  visible,
}: {
  text: string | "";
  visible: boolean;
  input?: HTMLInputElement | undefined;
}) => {
  return (
    <>
      {visible && text !== "" && (
        <m.label
          className={styles.errorLabel}
          htmlFor={input ? input.id : undefined}
          aria-live="assertive"
          aria-label={text}
          aria-errormessage={text}
          role="alert"
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.3, ease: "easeOut" }}
        >
          <Icon id="error-icon" aria-hidden className="icon" variant="error" />
          <span aria-hidden>{text}</span>
        </m.label>
      )}
    </>
  );
};

export default ErrorLabel;