import type { BlogPostGalleryItem } from "@/data/blog-post-detail";
import Image from "next/image";

const imgFluid = { width: "100%", height: "auto" } as const;

export default function BlogPostGallery({ gallery }: { gallery: BlogPostGalleryItem[] }) {
  return (
    <div className="row">
      {gallery.map((item) => (
        <div key={item.id} className="col-lg-6 col-md-6">
          <div className="blog-img">
            <Image
              src={item.src}
              alt={item.alt}
              width={item.width}
              height={item.height}
              className="blog-img"
              style={imgFluid}
            />
          </div>
        </div>
      ))}
    </div>
  );
}