import React from "react";

import { useSelector } from "react-redux";

import { $L } from "../../utils/helperMethods";
import css from "./Loader.module.less";

export default function Loader() {
  const showMessage = useSelector(
    (state) => state.common.appStatus.showLoadingPanel?.showMessage
  );

  return (
    <div className={css.loaderContainer}>
      <div className={css.loaderBox}>
        <div className={css.loader}></div>
      </div>
      {showMessage && (
        <p className={css.loaderText}>
          {$L(
            "Please wait a moment. It may take more than 1 minute to process the order."
          )}
        </p>
      )}
    </div>
  );
}
