Untitled

"use client";

import { useEffect, useState } from "react";
import HeroSection from "../components/HeroSection";
import YoutubePlayer from "../components/YoutubePlayer";
import AboutPlaceSection from "../components/AboutPlaceSection";
import { fetchHomePageData } from "@/api/homeApi";
import { HomePageData } from "@/types/home";
import { useSelector } from "react-redux";
import { RootState } from "./store";
import EducationImprovement from "@/components/EducationImprovement";
import CenterSection from "@/components/CenterSection";
import CenterMainPage from "@/components/CenterMainPage";
import MainpageModal from "@/components/modals/MainpageModal";
import Cookies from "js-cookie";

export default function Home() {
  const [pageData, setPageData] = useState<HomePageData | null>(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);
  const [allContentLoaded, setAllContentLoaded] = useState(false);

  const user = useSelector((state: RootState) => state.user);
  const token = typeof window !== "undefined" ? localStorage.getItem("token") : null;
  const [showModal, setShowModal] = useState<boolean>(false);

  useEffect(() => {
    setShowModal(true);
  }, []);

  const handleCloseModal = () => {
    Cookies.set("mainPageModal", "true", { expires: 60 });
    setShowModal(false);
  };

  useEffect(() => {
    const loadData = async () => {
      try {
        const response = await fetchHomePageData();
        console.log(response);
        setPageData(response.data);
        setLoading(false);
      } catch (err) {
        setError("Failed to load data");
        setLoading(false);
      }
    };

    loadData();
  }, []);

  useEffect(() => {
    const handleWindowLoad = () => {
      setAllContentLoaded(true);
    };

    window.addEventListener("load", handleWindowLoad);
    return () => window.removeEventListener("load", handleWindowLoad);
  }, []);

  if (loading) return <div>Loading...</div>;
  if (error) return <div>Error: {error}</div>;
  if (!pageData) return <div>No data available</div>;

  return (
    <main className={`relative w-full overflow-x-hidden ${!allContentLoaded ? "overflow-y-hidden" : ""}`}>
      <div className="relative w-full">
        <HeroSection data={pageData.hero} />
        <YoutubePlayer />
        <EducationImprovement data={pageData.courses} />
        <CenterSection key="center" data={pageData.centerContent} />
        <CenterMainPage data={pageData.centers} />

        {user?.id || token ? null : <AboutPlaceSection />}

        {showModal && (
          <MainpageModal data={pageData.popup} onClose={handleCloseModal} />
        )}
      </div>
    </main>
  );
}