import Image from 'next/image';
import Link from 'next/link';
import { IProjectCardProps } from './project';
import { getProjects } from '@/services/projects';

export default async function ProjectsGrid({
  projects,
}: {
  projects: IProjectCardProps[];
}) {
  return (
    <div className="container mx-auto grid grid-cols-1 gap-6 px-4 pt-12 pb-0 md:grid-cols-2 md:py-28">
      {projects.map((project, index) => (
        <Link href={'/'} key={index} className="overflow-hidden bg-white">
          <div className="relative aspect-[1.4] w-full overflow-hidden rounded-4xl">
            <Image
              src={project.imageSrc}
              alt={project.title}
              fill
              className="h-auto w-full object-cover"
            />
          </div>

          <div className="py-7 text-center">
            <h2 className="mb-5 text-xl font-semibold">{project.title}</h2>
          </div>
        </Link>
      ))}
    </div>
  );
}