import { HTMLAttributes, JSX, useState } from "react";

import styles from "../../styles/errors.module.css";

export interface ErrorHandlerOptions {
  initialState: boolean;
  errMsg: string;
  errorMessageAttributes?: HTMLAttributes<HTMLDivElement>;
}

export interface ErrorHandler {
  showError: boolean;
  setShowError: (value: boolean) => void;
  ErrorMessage: () => JSX.Element;
}

export const useErrorHandling = (
  initialState: boolean,
  errMsg: string,
  errorMessageAttributes: HTMLAttributes<HTMLDivElement> | null = null
): ErrorHandler => {
  const [showError, setShowError] = useState(initialState);
  const ErrorMessage = (): JSX.Element => (
    <div className={styles.inputError} {...errorMessageAttributes}>
      {errMsg}
    </div>
  );

  return {
    showError,
    setShowError,
    ErrorMessage,
  };
};