"use client"

import { galleryItems } from "@/data";
import { motion } from "framer-motion";
import { useState } from "react";
import { ImageViewer } from "@/components/ui/ImageViewer";
import { SectionHeader } from "@/components/ui/SectionHeader";

export function Gallery() {
  const [selectedImage, setSelectedImage] = useState(null);

  return (
    <>
      <section id="gallery" className="py-20 bg-background">
        <div className="container px-4">
          <SectionHeader 
            title="Community Gallery" 
            subtitle="Moments captured by our community members."
          />

          <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
            {galleryItems.map((item, index) => (
              <motion.div
                key={item.id}
                initial={{ opacity: 0, scale: 0.9 }}
                whileInView={{ opacity: 1, scale: 1 }}
                transition={{ delay: index * 0.01 }}
                viewport={{ once: true }}
                onClick={() => setSelectedImage(item)}
                className={`rounded-xl overflow-hidden bg-muted aspect-square relative group cursor-pointer ${
                  index === 0 ? "md:col-span-2 md:row-span-2" : ""
                }`}
              >
                <img 
                  src={item.src} 
                  alt={item.alt}
                  className="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110"
                />
                <div className="absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex flex-col justify-end p-4">
                  <span className="text-white text-sm font-medium">{item.category}</span>
                </div>
              </motion.div>
            ))}
          </div>
        </div>
      </section>

      <ImageViewer 
        isOpen={!!selectedImage}
        onClose={() => setSelectedImage(null)}
        src={selectedImage?.src}
        alt={selectedImage?.alt}
        category={selectedImage?.category}
      />
    </>
  );
}
