Banner 12

type Props = {
  heading1: string;
  heading2: string;
  heading3: string;
  heading4: string;
  heading5: string;
  heading6: string;
  heading7: string;
  heading8: string;
  heading9: string;
  heading10: string;
};

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

export const Banner12 = (props: Banner12Props) => {
  const {
    heading1,
    heading2,
    heading3,
    heading4,
    heading5,
    heading6,
    heading7,
    heading8,
    heading9,
    heading10,
  } = {
    ...Banner12Defaults,
    ...props,
  };

  return (
    <section className="flex w-screen max-w-full justify-end overflow-hidden border-b border-scheme-border bg-scheme-foreground">
      <div className="flex w-[200vw]">
        <div className="flex w-screen animate-marquee-right items-center justify-around py-4">
          <div className="flex items-center justify-center px-4">
            <h1 className="text-large font-bold">{heading1}</h1>
          </div>
          <div className="flex items-center justify-center px-4">
            <h1 className="text-large font-bold">{heading2}</h1>
          </div>
          <div className="hidden items-center justify-center px-4 lg:flex">
            <h1 className="text-large font-bold">{heading3}</h1>
          </div>
          <div className="hidden items-center justify-center px-4 lg:flex">
            <h1 className="text-large font-bold">{heading4}</h1>
          </div>
          <div className="hidden items-center justify-center px-4 md:flex">
            <h1 className="text-large font-bold">{heading5}</h1>
          </div>
        </div>
        <div className="flex w-screen animate-marquee-right items-center justify-around py-4">
          <div className="flex items-center justify-center px-4">
            <h1 className="text-large font-bold">{heading6}</h1>
          </div>
          <div className="flex items-center justify-center px-4">
            <h1 className="text-large font-bold">{heading7}</h1>
          </div>
          <div className="hidden items-center justify-center px-4 lg:flex">
            <h1 className="text-large font-bold">{heading8}</h1>
          </div>
          <div className="hidden items-center justify-center px-4 lg:flex">
            <h1 className="text-large font-bold">{heading9}</h1>
          </div>
          <div className="hidden items-center justify-center px-4 md:flex">
            <h1 className="text-large font-bold">{heading10}</h1>
          </div>
        </div>
      </div>
    </section>
  );
};

export const Banner12Defaults: Props = {
  heading1: "Relume Library",
  heading2: "Relume Library",
  heading3: "Relume Library",
  heading4: "Relume Library",
  heading5: "Relume Library",
  heading6: "Relume Library",
  heading7: "Relume Library",
  heading8: "Relume Library",
  heading9: "Relume Library",
  heading10: "Relume Library",
};