import React, { useEffect, useState, useSyncExternalStore } from "react";

import Header from "./components/header/Header";
import Footer from "./components/footer/Footer";
import Hero from "./components/hero/Hero";
import InfoSection from "./components/info/InfoSection";
import Separator from "./components/separater/Separater";
import Projects from "./components/projects/Projects";
import AboutMe from "./components/aboutMe/AboutMe";
import Publications from "./components/publications/Publications";
import Contact from "./components/contact/Contact";

import styles from "./App.module.css";

function App() {
	const [educationData, setEducationData] = useState([]);
	const [experienceData, setExperienceData] = useState([]);
	const [projectsData, setProjectsData] = useState([]);
	const [personalData, setPersonalData] = useState([]);

	useEffect(() => {
		const fetchEducationData = async () => {
			const response = await fetch("/assets/data/educationData.json");
			const data = await response.json();
			setEducationData(data);
		};

		const fetchExperienceData = async () => {
			const response = await fetch("/assets/data/experienceData.json");
			const data = await response.json();
			setExperienceData(data);
		};

		const fetchProjectsData = async () => {
			const response = await fetch("/assets/data/projectsData.json");
			const data = await response.json();
			setProjectsData(data);
		};

		const fetchPersonalData = async () => {
			const response = await fetch("/assets/data/personalData.json");
			const data = await response.json();
			setPersonalData(data);
		};

		fetchEducationData();
		fetchExperienceData();
		fetchProjectsData();
		fetchPersonalData();
	}, []);

	return (
		<div className={styles.app}>
			<Header />
			<main className={styles.main}>
				<section id="home">
					<Hero />
				</section>
				<section id="aboutme">
					<AboutMe />
				</section>
				<section id="experience">
					<InfoSection title="Experience" data={experienceData} isEducation={true} />
				</section>
				<Separator width="70%" thickness="3px" />
				<section id="projects">
					<Projects title="Projects" data={projectsData} />
				</section>
				<Separator width="70%" thickness="3px" />
				<section id="education">
					<InfoSection title="Education" data={educationData} isEducation={true} />
				</section>
				<Separator width="70%" thickness="3px" />
				<section id="publications">
					<Publications />
				</section>
				<Separator width="70%" thickness="3px" />
				<section id="contact">
					<Contact />
				</section>
			</main>
			<Footer />
		</div>
	);
}

export default App;