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

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 getCountryEmoji = (): string => {
		switch (props.city) {
			case "Warsaw":
				return ", Poland";
			case "London":
				return ", UK󠁧󠁢󠁥󠁮󠁧󠁿";
			case "Edinburgh":
				return ", UK󠁧󠁢󠁳󠁣󠁴󠁿";
		}
	};

	return (
		<div style={{ fontSize: "1.1em" }} className={styles.education} data-aos={"fade-right"}>
			<div>
				<span className={styles.title}>{props.title}</span> in <b>{props.subtitle}</b>
				<br/>
				at <i>{props.institution}</i>
				{props.notes?
					<ul className={styles.notes}>
						{props.notes.map((note, index) =>
							<li key={index}>
								{note}
							</li>
						)}
					</ul>
					: ""
				}
			</div>
			<span className={styles.otherDetails}>
				<div className={styles.location}>{props.city}{getCountryEmoji()}</div>
				<hr/>
				{props.endDate ?
					<>
						<i>From:&nbsp;&nbsp;</i>
						<span style={{ float:"right" }}>{props.startDate}</span>
						<br/>
						<i>To:&nbsp;&nbsp;</i>
						<span style={{ float:"right" }}>{props.endDate}</span>
					</>:
					"Since " + props.startDate
				}
			</span>
		</div>
	);
};

export default Education;