import { Grid, GridCol } from "@treejs/components/Grid";
import { FC, useMemo } from "react";
import { skills } from "../constants/skills";
import MyTitle from "./MyTitle";
import { map } from "ramda";
import { ISkill } from "../types/skills";
import MySection from "./MySection";
import { GRID_SIZE } from "@treejs/components/Grid/types";

const Skills: FC = () => {
	const renderSkills = useMemo(() => {
		let i = 0;
		return map((skillList: ISkill[]) => {
			let z = 0;
			const skills = map((skill: ISkill) => {
				z++;
				return (
					<li className="flex mb-1" key={z}>
						<svg height="10" width="10" className="mt-1.5 mr-2">
							<circle
								cx="5"
								cy="5"
								r="4"
								fill={skill.level === "full" ? "#90C8AC" : "#FFE7BF"}
							/>
						</svg>
						{skill.name}
					</li>
				);
			})(skillList);
			i++;
			return (
				<ol className="mt-2" key={i}>
					{skills}
				</ol>
			);
		})(skills);
	}, []);

	return (
		<MySection iconName="skills">
			<MyTitle left="Umím" right="Ovládat" />
			<Grid cols={{ [GRID_SIZE.SM]: 4 }} className="mt-10 grid-cols-2">
				<GridCol>
					<b>Vývoj FE</b>
					{renderSkills[0]}
				</GridCol>
				<GridCol>
					<b>Vývoj BE</b>
					{renderSkills[1]}
				</GridCol>
				<GridCol>
					<b>Další</b>
					{renderSkills[2]}
				</GridCol>
				<GridCol>
					<b>Správa serveru</b>
					{renderSkills[3]}
				</GridCol>
			</Grid>

			<div className="flex mt-6 text-sm">
				<div className="flex">
					<svg height="10" width="10" className="mt-1.5 mr-2">
						<circle cx="5" cy="5" r="4" fill="#90C8AC" />
					</svg>
					používám na projektech
				</div>

				<div className="flex ml-5">
					<svg height="10" width="10" className="mt-1.5 mr-2">
						<circle cx="5" cy="5" r="4" fill="#FFE7BF" />
					</svg>
					hraju si a učím se
				</div>
			</div>
		</MySection>
	);
};

export default Skills;