type FormHelperTextProps = {
  helperText?: React.ReactNode;
  children?: React.ReactNode;
  id?: string;
  styleClasses?: string;
  icon?: React.ReactNode;
};

function FormHelperText({
  helperText,
  children,
  id,
  styleClasses,
  icon,
}: FormHelperTextProps) {
  return (
    <span
      className={`font-inter font-regular ${
        styleClasses || ""
      } mt-0.5 text-[10px] text-gray-500 leading-tight flex`}
      id={id}
      role="alert"
    >
      {icon && <span className="me-1">{icon}</span>}
      {helperText}
      {children}
    </span>
  );
}

export default FormHelperText;