import Image from "next/image";
import { IProjectArguments } from "@/src/portfolio/types/project";
import ProjectLinks from "./ProjectLinks";
import styles from "./projects.module.scss";

interface IProjectCardProps extends IProjectArguments {
	index: number;
	onClick: () => void;
}

const ProjectCard = (props: IProjectCardProps): JSX.Element => {
	const { imagePath, title, text, github, access, document, index, onClick } = props;
	const delay = (index % 3) * 100;

	return (
		<div className={styles.card} data-aos={"fade-up"} data-aos-delay={delay} onClick={onClick}>
			<div className={styles.imageWrapper}>
				<Image
					src={"/portfolio/projects/" + imagePath}
					alt={"Image showing the " + title + " project."}
					fill={true}
					sizes={"(max-width: 768px) 100vw, (max-width: 1280px) 50vw, 33vw"}
					className={styles.image}
				/>
			</div>
			<div className={styles.content}>
				<h3 className={styles.cardTitle}>{title}</h3>
				<p className={styles.description}>{text}</p>
				<ProjectLinks github={github} access={access} document={document}/>
			</div>
		</div>
	);
};

export default ProjectCard;
