import React from "react";
import Image from "next/image";

import oxford from "../../public/companies/oxford.png";
import edinburgh from "../../public/companies/edinburgh.png";
import umadrid from "../../public/companies/universidadmadrid.png";
import upalmas from "../../public/companies/universidadpalmas.jpg";

function Carrusel() {
  const slidesUp = [
    oxford,
    edinburgh,
    umadrid,
    upalmas
  ];

  const slidesDown = [
    oxford
  ];

  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 flex min-w-full shrink-0 items-center justify-around gap-10">
            {slidesUp.map((slide, index) => {
              return (
                <Image
                  key={index}
                  className="my-4 p-4 border-2 opacity-80 grayscale max-w-[clamp(6rem,16vmin,16rem)] rounded-xl object-cover shadow-md"
                  src={slide}
                  alt={slide}
                />
              );
            })}
          </div>
          <div
            aria-hidden="true"
            className="animate-marquee flex min-w-full shrink-0 items-center justify-around gap-10"
          >
            {slidesUp.map((slide, index) => {
              return (
                <Image
                  key={index}
                  className="my-4 p-4 border-2 opacity-80 grayscale max-w-[clamp(6rem,16vmin,16rem)] rounded-xl object-cover shadow-md"
                  src={slide}
                  alt={slide}
                />
              );
            })}
          </div>
        </div>
      </div>
    </div>
  );
}

export default Carrusel;
