// React
import React, { useEffect, useLayoutEffect } from "react";
import { useLocation } from "react-router-dom";


// Components
import Aside from "@/components/Layout/Aside";
import Footer from "@/components/Layout/Footer";


// Interface
interface FrontWrapperProps {
  title?: string
  element: JSX.Element
}


// Components
function FrontWrapper(props: FrontWrapperProps) {
  const location = useLocation();

  useEffect(() => {
    const name = import.meta.env.PAUL_SITENAME;

    if (props.title) {
      document.title = `${props.title} - ${name}`;
    }
    else if (name) {
      document.title = String(name);
    }
  }, [location.pathname]);

  useLayoutEffect(() => {
    window.scrollTo({ top: 0, left: 0 });
  }, [location.pathname]);

  return (
    <>
      <Aside />
      {props.element}
      <Footer />
    </>
  );
}

export default FrontWrapper;