import type { Layout3GalleryImage } from "@/data/portfolio-layout3";
import Layout3Image from "./Layout3Image";

export default function Layout3GalleryRow({
  images,
  useContainerFluid,
}: {
  images: Layout3GalleryImage[];
  useContainerFluid?: boolean;
}) {
  const row = (
    <div className="row">
      {images.map((image) => (
        <div key={image.id} className={image.columnClass}>
          <div
            className={image.wrapperClass}
            data-aos="zoom-in"
            data-aos-duration={900}
            data-aos-delay={image.aosDelay}
          >
            <Layout3Image
              src={image.src}
              alt={image.alt}
              width={image.width}
              height={image.height}
              sizes={image.sizes}
              fluid={image.fluid}
            />
          </div>
        </div>
      ))}
    </div>
  );

  if (useContainerFluid) {
    return <div className="container-fluid">{row}</div>;
  }

  return row;
}