import { Project } from "@/data/projects";

interface ProjectShowcaseProps {
  projects: Project[];
}

export function ProjectShowcase({ projects }: ProjectShowcaseProps) {
  return (
    <section className="py-16 bg-black">
      <div className="mx-auto max-w-5xl px-4">
        <h2 className="text-white text-xl font-bold mb-8">Featured Projects</h2>

        <div className="space-y-16">
          {projects.map((project) => (
            <div key={project.id} className="grid grid-cols-12 gap-6 items-start">
              {/* Image left */}
              <div className="col-span-12 md:col-span-8">
                <div className="relative overflow-hidden">
                  <img
                    src={project.thumbnailUrl}
                    alt={project.title}
                    className="w-full h-auto object-cover"
                  />
                </div>
              </div>
              {/* Right-side label and description */}
              <div className="col-span-12 md:col-span-4 text-gray-300 text-xs space-y-2">
                <div className="text-right">
                  <div className="text-white">{project.title}</div>
                </div>
                <p className="leading-relaxed">
                  {project.description}
                </p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}
