import styles from "../styling/experience.module.scss";
import { getCityGroups } from "./Experience/helpers";
import CityGroup from "./Experience/CityGroup";

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

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

export default Experience;
