import { useState } from "react";
import projectData from "@/src/portfolio/data/projectData";
import ProjectCard from "./ProjectCard";
import ProjectModal from "./ProjectModal";
import { IProjectArguments } from "@/src/portfolio/types/project";
import styles from "./projects.module.scss";

const Projects = (): JSX.Element => {
	const [selectedProject, setSelectedProject] = useState<IProjectArguments | null>(null);

	const handleCardClick = (project: IProjectArguments): void => {
		setSelectedProject(project);
	};

	const handleCloseModal = (): void => {
		setSelectedProject(null);
	};

	return (
		<div className={styles.section} id={"projects"}>
			<div className={styles.container}>
				<h2 className={styles.title} data-aos={"fade-up"}>Projects</h2>
				<div className={styles.grid}>
					{projectData.map((project, index) => (
						<ProjectCard
							key={index}
							{...project}
							index={index}
							onClick={() => handleCardClick(project)}
						/>
					))}
				</div>
			</div>
			{selectedProject && (
				<ProjectModal {...selectedProject} onClose={handleCloseModal} />
			)}
		</div>
	);
};

export default Projects;
