import Image from "next/image";
import styles from "../styling/projects.module.scss";
import { VscGithub } from "react-icons/vsc";
import { BsGlobe2, BsFileEarmarkMedical } from "react-icons/bs";

export interface IProjectArguments {
    imagePath : string,
    title : string,
    text : string,
    tech : SkillEnum[],
    github? : string,
    access? : string,
	document? : string,
}

export enum SkillEnum {
	java = "java",
	pytorch = "pytorch",
	numpy = "numpy",
	plt = "matplotlib",
	tensorflow = "tensorflow",
	webscrape = "web scraping",
	graphql = "graphQL",
	spaCy = "spaCy",
	cpp = "c++",
	php = "php",
	typescript = "typescript",
	react = "react",
	html = "html",
	css = "css",
	express = "express.js",
	javascript = "javascript",
	bootstrap = "bootstrap",
	python = "python",
	linux = "linux",
	design3d = "3d design",
	videoEditing = "video-editing",
	photoshop = "photo-editing",
	machineLearning = "machine learning",
	computerVision = "computer vision",
	dataEngineering = "data engineering",
	nlp = "natural language processing",
	latex = "LATEX",
	research = "research",
	polish = "Polish",
	german = "German",
	english = "English",
}

const Project = ({ imagePath, title, text, github, access, document } : IProjectArguments): JSX.Element => {
	return (
		<div className={styles.projectDisplay}>
			<div className={styles.text}>
				<h2 data-aos={"fade-left"}>{title}</h2>
				<p data-aos={"fade-left"}>
					{text}
				</p>
				<div className={styles.links}>
					{github?
						<a href={github} title={"Github repository of the project"} className={styles.icon} data-aos={"fade-left"}>
							<VscGithub/>
						</a> : ""}
					{access?
						<a href={access} title={"View and use the project here"} className={styles.icon} data-aos={"fade-left"}>
							<BsGlobe2/>
						</a> : ""}
					{document?
						<a href={document} title={"The report here"} className={styles.icon} data-aos={"fade-left"}>
							<BsFileEarmarkMedical/>
						</a> : ""}
				</div>
			</div>

			<div className={styles.imageAndTech}>
				<div className={styles.imageContainer}>
					<Image
						src = {"/portfolio/projects/"+imagePath}
						alt = {"Image showing the " + title + " project."}
						fill = {true}
						sizes = {"100%"}
					/>
				</div>
				{/*<h3 data-aos={"fade-right"}>Technologies Used:</h3>*/}
				{/*<div className={styles.tech}>*/}
				{/*	{tech.map((value) => {*/}
				{/*		i++;*/}
				{/*		return <SkillDisplay key={i} name={value}/>;*/}
				{/*	})}*/}
				{/*</div>*/}
			</div>
		</div>
	);
};

export default Project;
