import React, { useContext } from "react";

import AppContext from "@ctx/AppContext";
import gif from "@img/loading.gif";
import Image from "next/image";

const Loading = ({ rateId }) => {
  const CTX = useContext(AppContext);
  const loading = CTX.state.loading;

  return (
    <>
      <div
        className={`fixed w-full tr03 z-50 ${
          loading ? "bottom-5 " : "bottom-[-100px] "
        } `}
      >
        <div className="bg-secondary-950 w-fit  rounded-full px-1 py-2 flex rtl m-3 ">
          <p className="mb-0 text-primary-300 mx-2 blacj ">لطفا صبر کنید</p>
          <div className="w-[30px] ml-3">
            <Image src={gif} alt="" className="" />
          </div>
        </div>
      </div>
    </>
  );
};
export default Loading;