import styles from "../../styling/skillsLinks.module.scss";
import { FaGithub, FaLinkedin, FaFilePdf, FaEnvelope } from "react-icons/fa";

interface ILink {
	title: string;
	link: string;
	icon: JSX.Element;
}

const moreInfoLinks: ILink[] = [
	{
		title: "Github",
		link: "https://github.com/KuchtaVR6/",
		icon: <FaGithub />
	},
	{
		title: "LinkedIn",
		link: "https://linkedin.com/in/kuchtap",
		icon: <FaLinkedin />
	},
	{
		title: "Curriculum Vitae",
		link: "/PatrykKuchta_CV.pdf",
		icon: <FaFilePdf />
	}
];

const contactLinks: ILink[] = [
	{
		title: "Email",
		link: "mailto:patryk@kuchta.uk",
		icon: <FaEnvelope />
	},
	{
		title: "LinkedIn",
		link: "https://linkedin.com/in/kuchtap",
		icon: <FaLinkedin />
	}
];

const LinksSection = (): JSX.Element => {
	return (
		<div data-aos={"fade-right"} className={styles.otherLinks}>
			<h2>Find out more about me:</h2>
			<ul>
				{moreInfoLinks.map(({ title, link, icon }, key) => (
					<li key={key}>
						<a href={link} className={styles.linkWithIcon}>
							<span className={styles.icon}>{icon}</span>
							{title}
						</a>
					</li>
				))}
			</ul>
			<h2>Contact me through:</h2>
			<ul>
				{contactLinks.map(({ title, link, icon }, key) => (
					<li key={key}>
						<a href={link} className={styles.linkWithIcon}>
							<span className={styles.icon}>{icon}</span>
							{title}
						</a>
					</li>
				))}
			</ul>
		</div>
	);
};

export default LinksSection;
