"use client";

import { motion } from "framer-motion";
import { Isologo } from "@/components/ui";
import { cn } from "@/lib/utils";

type InfiniteMarqueeProps = {
  className: string;
  duration?: number;
};

const InfiniteMarquee = ({ className, duration = 24 }: InfiniteMarqueeProps) => (
  <div className={cn("absolute w-full overflow-hidden pointer-events-none fill-current", className)}>
    <motion.div
      className="flex h-full will-change-transform w-fit"
      animate={{
        x: ["0%", "-50%"],
      }}
      transition={{
        repeat: Infinity,
        duration: duration,
        ease: "linear",
      }}
    >
      <ContentGrid />
    </motion.div>
  </div>
);

const ContentGrid = () => (
  <div className="flex h-full">
    {Array.from({ length: 4 }).map((_, j) => (
      <div className="h-full flex" key={j}>
        {Array.from({ length: 4 }).map((_, i) => (
          <Isologo className="fill-inherit h-full -ml-[0.0625rem]" key={i} />
        ))}
      </div>
    ))}
  </div>
);

export default InfiniteMarquee;