import { Outlet, useParams } from "react-router-dom";
import Header from "../components/header";
import Footer from "../components/footer";
import Particle from "../components/particle";
import { Helmet } from "react-helmet-async";
import { useEffect } from "react";
import { useDispatch } from "react-redux";
import { setConfigId } from "../redux/slices/configId";

const Layout = () => {
  const { configs } = useParams<{ configs: string }>();
  const dispatch = useDispatch();
  useEffect(() => {
    if (configs === "1" || configs === "2" || configs === "3") {
      dispatch(setConfigId(configs));
    }
    if (configs)
      setTimeout(() => {
        const element = document.getElementById("configs");
        if (element) {
          element.scrollIntoView({ behavior: "smooth" });
        } else {
          console.error("Element with ID 'configs' not found");
        }
      }, 100); // Scroll to 100% of the page height
  }, [configs]);

  return (
    <>
      <Helmet>
        <title>پرشین پینگ | Persian Ping</title>
        <meta
          name="description"
          content="بهترین خدمات پینگ برای بازی‌های آنلاین با پرشین پینگ"
        />
        <meta
          name="keywords"
          content="پرشین پینگ, خدمات پینگ, بازی آنلاین, کاهش پینگ"
        />
      </Helmet>

      <Particle />
      <div className={`relative bg-noisy w-full min-h-screen`}>
        <div className="relative max-w-[1400px] mx-auto h-full flex flex-col justify-between">
          <div className="relative w-full h-full">
            <Header />
            <main className="w-full h-full px-5 py-0">
              <Outlet />
            </main>
          </div>
          <Footer />
        </div>
      </div>
    </>
  );
};

export default Layout;