// MovingLogos.js
"use client";
import { useEffect } from "react";

import Image from "next/image";
import logobrand2 from "../../public/images/logobrand/2.png";
import logobrand3 from "../../public/images/logobrand/3.png";
import logobrand4 from "../../public/images/logobrand/4.png";
import logobrand5 from "../../public/images/logobrand/5.png";
import logobrand6 from "../../public/images/logobrand/6.png";

// import styles from "./MovingLogos.module.css";

const MovingLogos = () => {
  const logos = [
    { id: 1, logo: logobrand5 },
    { id: 2, logo: logobrand4 },
    { id: 3, logo: logobrand3 },
    { id: 4, logo: logobrand6 },
    { id: 1, logo: logobrand5 },
    { id: 2, logo: logobrand4 },
    { id: 3, logo: logobrand3 },
    { id: 4, logo: logobrand2 },
    { id: 1, logo: logobrand5 },
    { id: 2, logo: logobrand4 },
    { id: 3, logo: logobrand3 },
    { id: 4, logo: logobrand6 },
    { id: 1, logo: logobrand5 },
    { id: 2, logo: logobrand4 },
    { id: 3, logo: logobrand6 },
    { id: 4, logo: logobrand2 },
    { id: 1, logo: logobrand5 },
    { id: 2, logo: logobrand4 },
    { id: 3, logo: logobrand3 },
    { id: 4, logo: logobrand2 },
  ];

  useEffect(() => {
    const moveLogos = () => {
      logos.forEach((logo) => {
        const logoElement = document.getElementById(`logo-${logo.id}`);
        if (logoElement) {
          logoElement.style.transform = "translateX(-10px)"; // Adjust the value based on your preference
        }
      });
    };

    const intervalId = setInterval(moveLogos, 100); // Adjust the interval duration based on your preference

    return () => clearInterval(intervalId);
  }, [logos]);

  return (
    <div className="">
      {/* {logos.map((e) => (
        <div className="w-[100px]">
          <Image
            key={e.id}
            id={`logo-${e.id}`}
            src={e.logo}
            alt={`Logo ${e.id}`}
            // className={styles.logo}
          />
        </div>
      ))} */}

      <div className="xs:w-4/5 lg:w-3/5 mx-auto">
        <div className="w-full inline-flex flex-nowrap overflow-hidden [mask-image:_linear-gradient(to_right,transparent_0,_black_100px,_black_calc(100%-100px),transparent_100%)]">
          <ul
            x-ref="logos"
            className="flex items-center justify-center md:justify-start [&_li]:mx-5 [&_img]:max-w-none animate-infinite-scroll hover:animate-infinite-scroll2"
          >
            {logos.map((e, index) => (
              <li className="w-[]" key={index}>
                <Image
                  key={e.id}
                  id={`logo-${e.id}`}
                  src={e.logo}
                  alt={`Logo ${e.id}`}
                  className="xs:w-[60px] lg:w-[100px]"
                />
              </li>
            ))}
          </ul>
        </div>
      </div>
    </div>
  );
};

export default MovingLogos;