import {FC} from "react";
import styles from "../styling/projects.module.scss";
import {TechnologyEnum} from "@/src/portfolio/helpers/Project";

type args = {
    name : TechnologyEnum,
    level? : ProficiencyLevel,
}

export enum ProficiencyLevel {
	beginner = "Beginner",
	intermediate = "Intermediate",
	advanced = "Advanced",
	expert = "Expert",
	master = "Master",
}


const TechnologyDisplay : FC<args> = ({name, level}) => {
	const level_to_emoji = {
		[ProficiencyLevel.beginner]: "🌱",
		[ProficiencyLevel.intermediate]: "🌳",
		[ProficiencyLevel.advanced]: "🌟",
		[ProficiencyLevel.expert]: "🚀",
		[ProficiencyLevel.master]: "🧙‍♂️"
	};

	if (level) {
		return (
			<div id={name.toLowerCase()} className={styles.technology} data-aos={"fade-in"}>
				<b>{name}&nbsp;&nbsp;</b>
				<span style={{float: "right", fontSize: "0.8em"}}>{level} {level_to_emoji[level]}</span>
			</div>
		);
	}
	return (
		<a href={"#"+name.toLowerCase()} className={styles.technology} data-aos={"fade-in"}>
			{name}
		</a>
	);
};

export default TechnologyDisplay;