import React from "react";
import Image from "next/image";
import cadt from "../../public/projects/cadt.png";
import social from "../../public/projects/social.png";
import qats from "../../public/projects/qats.png";
import dn from "../../public/projects/dn.png";

function CarruselProjects() {
  const slides = [cadt, social, qats, dn];

  return (
    <div className="w-full">
      <div className="relative flex flex-col justify-center overflow-hidden py-6 sm:py-12">
        <div className="pointer-events-none relative flex gap-10 overflow-hidden">
          <div className="animate-marquee grayscale-[30%] flex min-w-full shrink-0 items-center justify-around gap-8">
            {slides.map((slide, index) => {
              return (
                <Image
                  key={index}
                  className="my-2 p-4 border-2 max-w-[clamp(10rem,30vmin,30rem)] rounded-xl object-cover shadow-md"
                  src={slide}
                  alt={slide}
                />
              );
            })}
          </div>
          <div
            aria-hidden="true"
            className="animate-marquee grayscale-[30%] flex min-w-full shrink-0 items-center justify-around gap-10"
          >
            {slides.map((slide, index) => {
              return (
                <Image
                  key={index}
                  className="my-2 p-4 border-2 max-w-[clamp(10rem,30vmin,30rem)] rounded-xl object-cover shadow-md"
                  src={slide}
                  alt={slide}
                />
              );
            })}
          </div>
        </div>
      </div>
    </div>
  );
}

export default CarruselProjects;
