Banner 14

"use client";

import { useScroll, useTransform, motion } from "motion/react";
import { useRef } from "react";

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

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

export const Banner14 = (props: Banner14Props) => {
  const {
    heading1,
    heading2,
    heading3,
    heading4,
    heading5,
    heading6,
    heading7,
    heading8,
    heading9,
    heading10,
  } = {
    ...Banner14Defaults,
    ...props,
  };

  const sectionRef = useRef<HTMLDivElement>(null);
  const { scrollYProgress } = useScroll({
    target: sectionRef,
    offset: ["start start", "end end"],
  });

  const headingTranslate = useTransform(scrollYProgress, [0, 1], ["-25%", "0%"]);

  return (
    <section ref={sectionRef} className="overflow-hidden">
      <div className="flex border-t border-b border-scheme-border whitespace-nowrap">
        <div className="flex w-full items-center overflow-hidden py-4 whitespace-nowrap">
          <motion.div
            className="ml-12 grid auto-cols-max grid-flow-col grid-cols-[max-content] gap-12"
            style={{ x: headingTranslate }}
          >
            <h1 className="text-large font-bold">{heading1}</h1>
            <h1 className="text-large font-bold">{heading2}</h1>
            <h1 className="text-large font-bold">{heading3}</h1>
            <h1 className="text-large font-bold">{heading4}</h1>
            <h1 className="text-large font-bold">{heading5}</h1>
          </motion.div>
          <motion.div
            className="ml-12 grid auto-cols-max grid-flow-col grid-cols-[max-content] gap-12"
            style={{ x: headingTranslate }}
          >
            <h1 className="text-large font-bold">{heading6}</h1>
            <h1 className="text-large font-bold">{heading7}</h1>
            <h1 className="text-large font-bold">{heading8}</h1>
            <h1 className="text-large font-bold">{heading9}</h1>
            <h1 className="text-large font-bold">{heading10}</h1>
          </motion.div>
        </div>
      </div>
    </section>
  );
};

export const Banner14Defaults: 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",
};