Banner 15

import React from "react";

type ImageProps = {
  src: string;
  alt?: string;
};

type Props = {
  section1Title: string;
  section1Image: ImageProps;
  section2Title: string;
  section2Image: ImageProps;
  section3Title: string;
  section3Image: ImageProps;
  section4Title: string;
  section4Image: ImageProps;
  section5Title: string;
  section5Image: ImageProps;
  section6Title: string;
  section6Image: ImageProps;
  section7Title: string;
  section7Image: ImageProps;
  section8Title: string;
  section8Image: ImageProps;
};

export type Banner15Props = React.ComponentPropsWithoutRef<"section"> & Partial<Props>;

export const Banner15 = (props: Banner15Props) => {
  const {
    section1Title,
    section1Image,
    section2Title,
    section2Image,
    section3Title,
    section3Image,
    section4Title,
    section4Image,
    section5Title,
    section5Image,
    section6Title,
    section6Image,
    section7Title,
    section7Image,
    section8Title,
    section8Image,
  } = {
    ...Banner15Defaults,
    ...props,
  };
  return (
    <section className="flex w-screen max-w-full justify-end overflow-hidden">
      <div className="flex justify-end">
        <div className="grid animate-marquee-right auto-cols-max grid-flow-col grid-cols-[max-content] items-center justify-around py-4">
          <div className="flex items-center justify-center px-8 text-center whitespace-nowrap lg:text-left">
            <h1 className="text-h1 font-bold">{section1Title}</h1>
          </div>
          <div className="relative aspect-[3/2] w-full overflow-hidden object-cover">
            <img
              src={section1Image.src}
              alt={section1Image.alt}
              className="aspect-[3/2] size-full h-16 max-h-24 rounded-image object-cover md:h-auto"
            />
          </div>
          <div className="flex items-center justify-center px-8 text-center whitespace-nowrap lg:text-left">
            <h1 className="text-h1 font-bold">{section2Title}</h1>
          </div>
          <div className="relative aspect-[3/2] w-full overflow-hidden object-cover">
            <img
              src={section2Image.src}
              alt={section2Image.alt}
              className="aspect-[3/2] size-full h-16 max-h-24 rounded-image object-cover md:h-auto"
            />
          </div>
          <div className="flex items-center justify-center px-8 text-center whitespace-nowrap lg:text-left">
            <h1 className="text-h1 font-bold">{section3Title}</h1>
          </div>
          <div className="relative aspect-[3/2] w-full overflow-hidden object-cover">
            <img
              src={section3Image.src}
              alt={section3Image.alt}
              className="aspect-[3/2] size-full h-16 max-h-24 rounded-image object-cover md:h-auto"
            />
          </div>
          <div className="flex items-center justify-center px-8 text-center whitespace-nowrap lg:text-left">
            <h1 className="text-h1 font-bold">{section4Title}</h1>
          </div>
          <div className="relative aspect-[3/2] w-full overflow-hidden object-cover">
            <img
              src={section4Image.src}
              alt={section4Image.alt}
              className="aspect-[3/2] size-full h-16 max-h-24 rounded-image object-cover md:h-auto"
            />
          </div>
        </div>
        <div className="grid animate-marquee-right auto-cols-max grid-flow-col grid-cols-[max-content] items-center justify-around py-4">
          <div className="flex items-center justify-center px-8 text-center whitespace-nowrap lg:text-left">
            <h1 className="text-h1 font-bold">{section5Title}</h1>
          </div>
          <div className="relative aspect-[3/2] w-full overflow-hidden object-cover">
            <img
              src={section5Image.src}
              alt={section5Image.alt}
              className="aspect-[3/2] size-full h-16 max-h-24 rounded-image object-cover md:h-auto"
            />
          </div>
          <div className="flex items-center justify-center px-8 text-center whitespace-nowrap lg:text-left">
            <h1 className="text-h1 font-bold">{section6Title}</h1>
          </div>
          <div className="relative aspect-[3/2] w-full overflow-hidden object-cover">
            <img
              src={section6Image.src}
              alt={section6Image.alt}
              className="aspect-[3/2] size-full h-16 max-h-24 rounded-image object-cover md:h-auto"
            />
          </div>
          <div className="flex items-center justify-center px-8 text-center whitespace-nowrap lg:text-left">
            <h1 className="text-h1 font-bold">{section7Title}</h1>
          </div>
          <div className="relative aspect-[3/2] w-full overflow-hidden object-cover">
            <img
              src={section7Image.src}
              alt={section7Image.alt}
              className="aspect-[3/2] size-full h-16 max-h-24 rounded-image object-cover md:h-auto"
            />
          </div>
          <div className="flex items-center justify-center px-8 text-center whitespace-nowrap lg:text-left">
            <h1 className="text-h1 font-bold">{section8Title}</h1>
          </div>
          <div className="relative aspect-[3/2] w-full overflow-hidden object-cover">
            <img
              src={section8Image.src}
              alt={section8Image.alt}
              className="aspect-[3/2] size-full h-16 max-h-24 rounded-image object-cover md:h-auto"
            />
          </div>
        </div>
      </div>
    </section>
  );
};

export const Banner15Defaults: Props = {
  section1Title: "Relume Library",
  section1Image: {
    src: "https://d22po4pjz3o32e.cloudfront.net/placeholder-image.svg",
    alt: "Relume Library",
  },
  section2Title: "Relume Library",
  section2Image: {
    src: "https://d22po4pjz3o32e.cloudfront.net/placeholder-image.svg",
    alt: "Relume Library",
  },
  section3Title: "Relume Library",
  section3Image: {
    src: "https://d22po4pjz3o32e.cloudfront.net/placeholder-image.svg",
    alt: "Relume Library",
  },
  section4Title: "Relume Library",
  section4Image: {
    src: "https://d22po4pjz3o32e.cloudfront.net/placeholder-image.svg",
    alt: "Relume Library",
  },
  section5Title: "Relume Library",
  section5Image: {
    src: "https://d22po4pjz3o32e.cloudfront.net/placeholder-image.svg",
    alt: "Relume Library",
  },
  section6Title: "Relume Library",
  section6Image: {
    src: "https://d22po4pjz3o32e.cloudfront.net/placeholder-image.svg",
    alt: "Relume Library",
  },
  section7Title: "Relume Library",
  section7Image: {
    src: "https://d22po4pjz3o32e.cloudfront.net/placeholder-image.svg",
    alt: "Relume Library",
  },
  section8Title: "Relume Library",
  section8Image: {
    src: "https://d22po4pjz3o32e.cloudfront.net/placeholder-image.svg",
    alt: "Relume Library",
  },
};