import { FC } from "react";
import styles from "../styling/currentWork.module.scss";
import Location from "./Location";

export type EducationArgs = {
    institution : string,
    startDate : string,
    title : string,
	subtitle : string,
    city : "Warsaw" | "London" | "Edinburgh",
    endDate? : string,
	notes? : string[]
	useWith? : true,
}

const Education : FC<EducationArgs> = (props) => {

	const getLocationString = (): string => {
		switch (props.city) {
			case "Warsaw":
				return "Warsaw, Poland";
			case "London":
				return "London, UK";
			case "Edinburgh":
				return "Edinburgh, UK";
		}
	};

	return (
		<div className={styles.educationEntry} data-aos={"fade-up"}>
			<div className={styles.degree}>
				{props.title} in {props.subtitle}
			</div>
			<div className={styles.institution}>
				at {props.institution}
			</div>
			{props.notes && (
				<ul className={styles.notes}>
					{props.notes.map((note, index) => (
						<li key={index}>{note}</li>
					))}
				</ul>
			)}
			<div className={styles.details}>
				<Location city={getLocationString()} className={styles.location} />
				<div className={styles.dates}>
					{props.endDate ? (
						<span>{props.startDate} - {props.endDate}</span>
					) : (
						<span>Since {props.startDate}</span>
					)}
				</div>
			</div>
		</div>
	);
};

export default Education;
