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

export type WorkExperienceArgs = {
    industry? : "Education" | "Software" | "Software & AI" | "Hospitality" | "Artificial Intelligence",
    company : string,
    startDate : string,
    title : string,
    city : string,
    country : string,
    endDate? : string,
    displayLocation? : string,
    isImportant? : boolean
}

const WorkExperience : FC<WorkExperienceArgs> = (props) => {

	const getEmojiForIndustry = (): string | undefined => {
		switch (props.industry) {
			case "Education":
				return "🎓";
			case "Software & AI":
				return "👨‍💻";
			case "Software":
				return "💻";
			case "Hospitality":
				return "🛎️";
			case "Artificial Intelligence":
				return "🤖";
		}
	};

	return (
		<div className={styles.job} data-aos={"fade-left"}>
			<span className={styles.largerText}>
				<b>{props.title}</b><br/>
				at <span className={styles.redText}>{props.company}</span><br/>
			</span>
			in <b>{props.city}, {props.country}.</b>
			<div className={styles.industry}>{getEmojiForIndustry()} {props.industry}</div>
			<hr/>
			{props.endDate ? props.startDate + " - " + props.endDate : "Since " + props.startDate}

		</div>
	);
};

export default WorkExperience;
