import { Outlet, useLocation } from "react-router-dom";
import styles from "./styles.module.css";
import { useEffect, useRef } from "react";
import { useSchemeColorByElement } from "@/hooks/useSchemeColorByElement";
import Footer from "@/components/Footer";
import classNames from "classnames";
import { useStyle } from "../providers/StyleProvider/useStyle";

function MainLayout() {
  const mainRef = useRef<HTMLDivElement>(null);
  const innerRef = useRef<HTMLDivElement>(null);
  useSchemeColorByElement(mainRef.current, "section.page, .page, section", [
    location,
  ]);
  const { style } = useStyle();
  const { pathname } = useLocation();

  useEffect(() => {
    innerRef.current?.scrollTo({
      top: 0,
      left: 0,
    });
  }, [pathname]);

  return (
    <main className={classNames(styles.main)} ref={mainRef}>
      <section className={styles.content} style={style} ref={innerRef}>
        <Outlet />
        <Footer />
      </section>
    </main>
  );
}

export default MainLayout;
