import React from 'react';

interface Props {
  id?: string | undefined;
  error?: string | null;
}
const InputError = ({ error, id = undefined }: Props) => {
  if (!error || error === '') return <></>;

  return (
    <span
      id={`${id}`}
      className="error absolute bg--ctaAlt font--light font--10 padding--sm text--wrap bg-red-500 text-white text-md p-1 bottom-0 right-1"
      // aria-describedby={id}
      aria-live="polite"
      aria-atomic="true"
    >
      {error}
    </span>
  );
};

export default InputError;