import style from "./message.module.css";
import { customerApi } from "../../../api/api";
import { useState } from "react";
import { useEffect } from "react";
import Loader from "@/components/utils/loader";
import HtmlParser from "react-html-parser";

const Message = (props) => {
  const [loader, setLoader] = useState(true);
  const [message, setMessage] = useState([]);
  const getMessage = async () => {
    setLoader(true);
    await customerApi
      .get("/site/header/top")
      .then((res) => {
        if (res.data.success === true) {
          if (res.data.data && res.data.data.message.length > 0) {
            setMessage(res.data.data.message);
          }
        }
        setLoader(false);
      })
      .catch((err) => {
        setLoader(false);
        console.log("Err", err);
      });
  };
  useEffect(() => {
    getMessage();
  }, []);

  useEffect(() => {
    if (!loader && (!message || message.length == 0)) {
      props.close();
    }
    props.loader(loader);
  }, [message, loader]);
  return (
    <>
      {message.length > 0 && !loader && (
        <div className={style.announcement_bar}>
          <p>{HtmlParser(message[0])}</p>
          <div className={style.overlay}></div>
        </div>
      )}
      {loader && (
        <div className={style.announcement_bar}>
          {<Loader className={style.loader} />}
          <div className={style.overlay}></div>
        </div>
      )}
    </>
  );
};

export default Message;
