import styles from "../styling/experience.module.scss";
import { getCityGroups } from "./Experience/helpers";
import CityGroup from "./Experience/CityGroup";
import { workExperienceIntro } from "@/src/portfolio/data/workExperienceData";

const Experience = (): JSX.Element => {
	const cityGroups = getCityGroups();

	return (
		<div className={styles.section} id={"experience"}>
			<h2>Work Experience</h2>
			<p className={styles.intro}>{workExperienceIntro}</p>
			<div className={styles.cityGroupsContainer}>
				{cityGroups.map((group, index) => (
					<CityGroup key={index} group={group} />
				))}
			</div>
		</div>
	);
};

export default Experience;
