import { FC } from "react";
import Image from "next/image";
import { IProjectArguments } from "@/src/portfolio/types/project";
import ProjectLinks from "./ProjectLinks";
import styles from "./projects.module.scss";
import { IoClose } from "react-icons/io5";

interface IProjectModalProps extends IProjectArguments {
	onClose: () => void;
}

const ProjectModal: FC<IProjectModalProps> = (props) => {
	const { imagePath, title, text, github, access, document, onClose } = props;

	const handleBackdropClick = (e: React.MouseEvent<HTMLDivElement>): void => {
		if (e.target === e.currentTarget) {
			onClose();
		}
	};

	return (
		<div className={styles.modalBackdrop} onClick={handleBackdropClick}>
			<div className={styles.modalContent}>
				<button className={styles.closeButton} onClick={onClose} aria-label="Close modal">
					<IoClose />
				</button>
				<div className={styles.modalImageWrapper}>
					<Image
						src={"/portfolio/projects/" + imagePath}
						alt={"Image showing the " + title + " project."}
						fill={true}
						sizes={"(max-width: 768px) 100vw, 800px"}
						className={styles.modalImage}
					/>
				</div>
				<div className={styles.modalBody}>
					<h2 className={styles.modalTitle}>{title}</h2>
					<p className={styles.modalDescription}>{text}</p>
					<ProjectLinks github={github} access={access} document={document}/>
				</div>
			</div>
		</div>
	);
};

export default ProjectModal;
