"use client";
import Image from "next/image";
import logobrand1 from "@img/logo/ros.png";
import logobrand2 from "@img/logo/lam.png";
import logobrand3 from "@img/logo/tuk.png";
import logobrand4 from "@img/logo/vee.png";
import logobrand5 from "@img/logo/woo.png";

const MovingLogos = () => {
  const logos = [
    { id: 1, logo: logobrand1 },
    { id: 2, logo: logobrand2 },
    { id: 3, logo: logobrand3 },
    { id: 4, logo: logobrand4 },
    { id: 5, logo: logobrand5 },
    { id: 6, logo: logobrand1 },
    { id: 7, logo: logobrand2 },
    { id: 8, logo: logobrand3 },
    { id: 9, logo: logobrand4 },
    { id: 10, logo: logobrand5 },
  ];

  // Duplicate logos array to ensure seamless infinite scroll
  const duplicatedLogos = [...logos, ...logos, ...logos]; // Tripling the logos array

  return (
    <div className="relative w-full overflow-hidden">
      <div className="flex animate-scroll ">
        {duplicatedLogos.map((e, index) => (
          <div key={index} className="w-[100px] flex-shrink mx-4">
            <Image
              src={e.logo}
              alt={`Logo ${e.id}`}
              className="xs:w-[60px] lg:w-[100px] mx-10"
            />
          </div>
        ))}
      </div>
    </div>
  );
};

export default MovingLogos;