import React from 'react';
import Image from 'next/image';
import { projectsData, Project } from '@/content/projects';

interface ProjectsGalleryProps {
  category: Project['category'];
  title?: string;
  description?: string;
}

export const ProjectsGallery = ({ 
  category, 
  title = "Nasze realizacje", 
  description = "Zobacz przykłady prac wykonanych przez naszych certyfikowanych instalatorów." 
}: ProjectsGalleryProps) => {
  const projects = projectsData.filter((project) => project.category === category);

  if (projects.length === 0) return null;

  return (
    <section className="py-16 bg-white">
      <div className="container mx-auto px-4 md:px-8 max-w-7xl">
        <div className="text-center max-w-2xl mx-auto mb-12">
          <h2 className="text-3xl font-bold text-primary mb-4">{title}</h2>
          <p className="text-gray-600">{description}</p>
        </div>

        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
          {projects.map((project) => (
            <div key={project.id} className="group rounded-2xl overflow-hidden border border-gray-100 shadow-sm hover:shadow-lg transition-all duration-300 bg-white flex flex-col h-full">
              <div className="relative h-64 overflow-hidden bg-gray-100">
                <Image
                  src={project.imageUrl}
                  alt={project.title}
                  fill
                  className="object-cover group-hover:scale-105 transition-transform duration-500"
                  sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
                />
              </div>
              <div className="p-6 flex-grow flex flex-col">
                <h3 className="font-bold text-lg text-primary mb-2 group-hover:text-accent transition-colors">
                  {project.title}
                </h3>
                <p className="text-gray-600 text-sm mb-4 flex-grow">
                  {project.description}
                </p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};