import { Splide, SplideSlide } from "@splidejs/react-splide";
import { useEffect, useState } from "react";
import styles from "../styling/experience.module.scss";
import WorkExperience from "@/src/portfolio/helpers/WorkExperience";
import workExperienceData, { workExperienceParagraph } from "@/src/portfolio/data/workExperienceData";

const Experience = (): JSX.Element => {
	const calcPagesOnWidth = (width : number): number => {
		return Math.floor(width / 800 + 1);
	};

	const [pages, setPages] = useState(calcPagesOnWidth(1000));

	useEffect(() => {

		setPages(calcPagesOnWidth(window.innerWidth));
		const handleResize = (): void => {
			setPages(calcPagesOnWidth(window.innerWidth));
		};

		window.addEventListener("resize", handleResize);

		return () => {
			window.removeEventListener("resize", handleResize);
		};
	}, []);

	return (
		<div className={styles.section} id={"experience"}>
			<h2>Work Experience</h2>
			<p data-aos={"fade-right"}>
				{workExperienceParagraph}
			</p>
			<Splide
				options={{
					rewind: true,
					perPage: pages,
					focus: "center",
					start: 0
				}}
			>
				{
					workExperienceData.map((entry, index) =>
						<SplideSlide key={"outer"+index}>
							<WorkExperience
								{...entry} key={"inner"+index}
							/>
						</SplideSlide>
					)
				}
			</Splide>
		</div>
	);
};

export default Experience;
