import Image from "next/image";

import Brand1 from "../../../public/assets/imgs/partners_new/instalearn.png";
import Brand2 from "../../../public/assets/imgs/partners_new/shopless.webp";
import Brand3 from "../../../public/assets/imgs/partners_new/meccanos.png";
import Brand4 from "../../../public/assets/imgs/partners_new/purpleace.avif";

const DigitalAgencyRoll = () => {
  return (
    <>
      <section className="roll__area">
        <div className="roll__container">
          <div className="roll__slide grey-overlay">
            <Image src={Brand1} alt="test" width={150} height={70} />
          </div>
          <div className="roll__slide grey-overlay">
            <Image src={Brand2} alt="test" width={150} height={50} />
          </div>
          <div className="roll__slide grey-overlay">
            <Image src={Brand3} alt="test" width={150} height={50} />
          </div>
          <div className="roll__slide grey-overlay">
            <Image src={Brand4} alt="test" width={100} height={70} />
          </div>
        </div>
      </section>
      <style jsx>{`
        .roll__area {
          display: flex;
          justify-content: center;
          align-items: center;
          padding: 20px;
        }
        .roll__container {
          display: flex;
          gap: 100px; /* Updated spacing */
          justify-content: center;
          align-items: center;
        }
        .roll__slide {
          display: flex;
          align-items: center;
          justify-content: center;
        }
        .grey-overlay :global(img) {
          filter: brightness(0) invert(1); /* Makes the images white */
        }
      `}</style>
    </>
  );
};

export default DigitalAgencyRoll;