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

const Services: 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 (
		<Grid cols={6} className="mt-28">
			<GridCol colSpan={1} className="text-center">
				<Image
					src="/services.svg"
					alt="services"
					width={200}
					height={200}
					objectFit="contain"
				/>
			</GridCol>
			<GridCol colSpan={5} className="ml-10">
				<MyTitle left="Umím" right="Ovládat" />
				<Grid cols={4} className="mt-10">
					<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 aplikací</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>
			</GridCol>
		</Grid>
	);
};

export default Services;
