import styles from "../../styling/skillsLinks.module.scss";
import Accordion from "@/src/portfolio/helpers/Accordion";
import { skillsInCategories } from "@/src/portfolio/data/skillsData";
import { modulesTaken } from "@/src/portfolio/data/modulesTaken";
import certificateData from "@/src/portfolio/data/certificateData";

const renderSkillItem = (name: string, level: string): JSX.Element => (
	<div className={styles.technology} key={name}>
		<b>{name}</b>
		<span style={{ float: "right", fontSize: "0.8em" }}>
			<i>{level}</i>
		</span>
	</div>
);

const SkillsSection = (): JSX.Element => {
	return (
		<div data-aos={"fade-left"} className={styles.skills}>
			<div className={styles.innerskills}>
				<Accordion title={"Certificates and Awards"}>
					{certificateData.map(({ title, institution, awardDate }, index) => (
						<div className={styles.technology} key={index}>
							<b>{title}</b>
							<span style={{ float: "right", fontSize: "0.8em" }}>
								<i>{institution}</i> - {awardDate}
							</span>
						</div>
					))}
				</Accordion>

				<Accordion title={"Modules Taken"}>
					{modulesTaken.map(({ name, level, score }) => (
						<div id={name.toLowerCase()} className={styles.technology} key={name}>
							<b>{name}</b>
							<span style={{ float: "right", fontSize: "0.8em" }}>
								{score >= 0 ? score + "%" : "N/A"} <i>{level}</i>
							</span>
						</div>
					))}
				</Accordion>

				<Accordion title={"Human languages"}>
					{skillsInCategories["Human languages"].map((skill) => renderSkillItem(skill.name, skill.level))}
				</Accordion>

				<Accordion title={"Programming Languages"}>
					{skillsInCategories["Programming Languages"].map((skill) => renderSkillItem(skill.name, skill.level))}
				</Accordion>

				<Accordion title={"Frameworks/Libraries"}>
					{skillsInCategories["Frameworks/Libraries"].map((skill) => renderSkillItem(skill.name, skill.level))}
				</Accordion>

				<Accordion title={"Miscellaneous"}>
					{skillsInCategories["Miscellaneous"].map((skill) => renderSkillItem(skill.name, skill.level))}
				</Accordion>
			</div>
		</div>
	);
};

export default SkillsSection;
