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

const SkillsSection = (): JSX.Element => {
	return (
		<div data-aos = {"fade-left"} className={styles.skills}>
			<div>
				<i>Press the &quot;+&quot; to expand a section</i>&nbsp;👀
			</div>
			<div className={styles.innerskills}>
				{
					Object.entries(skillsInCategories).map(([category, skills]) => {
						return <Accordion title={category} key={category}>
							{
								skills.map((skill) => {
									return <SkillDisplay {...skill} key={skill.name} />;
								})
							}
						</Accordion>;
					})
				}

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

export default SkillsSection;
