import React from "react";
import Image from "next/image";
import { cleanImage } from "@/layout/imageHandling";

const Clientele = ({ partners = [], itemClassName = "single-partner-item" }) => {
  return (
    <div className="partner-area py-4 overflow-hidden">
      <div className="container">
        <div className="marquee-wrapper position-relative">
          <div className="marquee-track d-flex">
            {partners.concat(partners).map((logo, index) => (
              <div
                className={`${itemClassName} d-flex justify-content-center align-items-center `}
                key={`${logo.id}-${index}`}
                style={{ flex: "0 0 auto", width: "300px", height: "80px" }}
              >
                <Image
                  alt={logo?.logos[0]?.alternativeText || "image"}
                  src={cleanImage(logo?.logos[0]?.url)}
                  width={120}
                  height={60}
                  className="img-fluid industry-logo"
                />
              </div>
            ))}
          </div>
        </div>
      </div>

      <style jsx>{`
        .marquee-wrapper {
          width: 100%;
          overflow: hidden;
          position: relative;
        }

        .marquee-track {
          display: flex;
          width: max-content;
          animation: scroll-left 30s linear infinite;
        }

        @keyframes scroll-left {
          0% {
            transform: translateX(0%);
          }
          100% {
            transform: translateX(-50%);
          }
        }
      `}</style>
    </div>
  );
};

export default Clientele;