import { useEffect } from "react";
import Header from "./Header/Header";
import Footer from "./Footer/Footer";
import { Outlet } from "react-router-dom";
import ScrollToTopButton from "./ScrollToTopButton";
import useStore from "../store/store";

const Wrapper = () => {
  const { modal } = useStore();

  useEffect(() => {
    const body = document.body;
    if (!body) return;

    if (!modal) {
      body.style.overflow = "visible";
      return;
    }

    body.style.overflow = "hidden";
  }, [modal]);

  return (
    <>
      {modal}
      <Header />
      <Outlet />
      <ScrollToTopButton />
      <Footer />
    </>
  );
};

export default Wrapper;
