import { FC } from "react";
import styles from "./skillDisplay.module.scss";
import { SkillEnum } from "@/src/portfolio/types/project";

type SkillDisplayArgs = {
    name : SkillEnum,
    level? : ProficiencyLevel,
}

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

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

	if (level) {
		return (
			<div id={name.toLowerCase()} className={styles.technology}>
				<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 SkillDisplay;
