import Image from "next/image";

interface Props {
  images: string[];
}

export default function BlogGallery({
  images,
}: Props) {
  if (!images?.length) return null;

  return (
    <section className="mt-16">
      <h2 className="font-serif text-3xl text-espresso mb-8">
        Gallery
      </h2>

      <div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
        {images.map((image, index) => (
          <div
            key={index}
            className="relative aspect-[4/3] overflow-hidden rounded-xl"
          >
            <Image
              src={image}
              alt={`Gallery ${index + 1}`}
              fill
              className="object-cover transition duration-500 hover:scale-110"
            />
          </div>
        ))}
      </div>
    </section>
  );
}