import Image from "next/image";
import styles from "../styling/currentWork.module.scss";
import currentWorkData from "@/src/portfolio/data/currentWorkData";
import educationData from "@/src/portfolio/data/educationData";
import Education from "@/src/portfolio/helpers/Education";
import Location from "@/src/portfolio/helpers/Location";

const RoleInfo = (): JSX.Element => {
	return (
		<div className={styles.roleInfo}>
			<h3>{currentWorkData.role}</h3>
			<p className={styles.specialisation}>
				Specialising in <strong>{currentWorkData.specialisation}</strong>
			</p>
			<p className={styles.company}>
				at{" "}
				<a
					href={currentWorkData.companyUrl}
					target="_blank"
					rel="noopener noreferrer"
					className={styles.companyLink}
				>
					{currentWorkData.company}
				</a>
			</p>
			<div className={styles.locationWrapper}>
				<Location city={currentWorkData.location} className={styles.location} />
			</div>
		</div>
	);
};

const CurrentWork = (): JSX.Element => {
	return (
		<div className={styles.section} id={"about-me"}>
			<div className={styles.mainContent}>
				<div className={styles.currentWorkSection}>
					<h2>What I&apos;m Up To</h2>
					<div className={styles.content}>
						<div className={styles.imageContainer} data-aos={"fade-right"}>
							<div className={styles.imageWrapper}>
								<Image
									src={currentWorkData.imagePath}
									alt="Patryk Kuchta at work"
									fill={true}
									className={styles.profileImage}
								/>
							</div>
							<RoleInfo />
						</div>
						<div className={styles.description} data-aos={"fade-left"}>
							{currentWorkData.paragraphs.map((paragraph, index) => (
								<p key={index} dangerouslySetInnerHTML={{ __html: paragraph }} />
							))}
						</div>
					</div>
				</div>
				<div className={styles.educationSection}>
					<h2>Education</h2>
					{educationData.map((entry, index) => (
						<Education {...entry} key={index} />
					))}
				</div>
			</div>
		</div>
	);
};

export default CurrentWork;