import Link from "next/link";
import { motion } from "framer-motion";
import Image from "next/image";
export default function projectCard({project, index}) {
  return (
		<Link href={"projects/" + project.slug} key={index}>
			<motion.div
				className="z-10 relative flex justify-center items-start flex-col mb-5 md:px-10 w-full h-auto bg-gray-400 group/tes py-20 px-5 md:py-2 aspect-video "
				initial={{
					opacity: 0,
					x: -200,
				}}
				whileInView={{
					opacity: 1,
					x: 0,
				}}
				transition={{
					type: "spring",
				}}>
				{" "}
				{/* Add relative here */}
				<Image
					src={project.bg.src}
					alt="Alvalens"
					layout="fill"
					objectFit="cover"
					placeholder="blur"
					className="bg-slate-950 opacity-10  group-hover/tes:opacity-100 transition-all ease duration-500"
					blurDataURL={project.bg.blurDataURL}
				/>
				<div className="absolute top-0 left-0 bg-gray-600 px-4 py-2">
					<h4 className="text-white">{project.year}</h4>
				</div>
				<div className="transition-all ease duration-500 opacity-100 content text-center group-hover/tes:opacity-0 z-10">
					<h1 className="text-3xl font-bold mb-3">{project.title}</h1>
					<p>{project.desc}</p>
					<div className="flex justify-center items-center flex-row mt-5 flex-wrap">
						{project.tech.split(",").map((t, index) => (
							<span
								key={index}
								className="m-1 px-4 py-2 bg-gray-600 text-white ">
								{t}
							</span>
						))}
					</div>
				</div>
			</motion.div>
		</Link>
  );
}