import React from "react";
import { Swiper, SwiperSlide } from "swiper/react";
import { Autoplay, Navigation } from "swiper/modules";
import Image from "next/image";
import SwiperNav from "@/components/reuseables/SwiperNav";
import { cleanImage } from "@/layout/imageHandling";

const partners = [
  {
    id: 1,
    image: "/images/clientel/academic-city.svg",
    altText: "partner",
    link: "#",
  },
  {
    id: 2,
    image: "/images/clientel/ADALVO.svg",
    altText: "partner",
    link: "#",
  },
  {
    id: 3,
    image: "/images/clientel/CRESTA.svg",
    altText: "partner",
    link: "#",
  },
  {
    id: 4,
    image: "/images/clientel/DAZZLES.svg",
    altText: "partner",
    link: "#",
  },
  {
    id: 5,
    image: "/images/clientel/DESMET.svg",
    altText: "partner",
    link: "#",
  },
  {
    id: 6,
    image: "/images/clientel/GLIDER.svg",
    altText: "partner",
    link: "#",
  },
  {
    id: 7,
    image: "/images/clientel/KANTIME.svg",
    altText: "partner",
    link: "#",
  },
  {
    id: 8,
    image: "/images/clientel/KNOWLEDGEUM.svg",
    altText: "partner",
    link: "#",
  },
  {
    id: 9,
    image: "/images/clientel/LEADICS.svg",
    altText: "partner",
    link: "#",
  },
  {
    id: 10,
    image: "/images/clientel/OBEYA.svg",
    altText: "partner",
    link: "#",
  },
  {
    id: 11,
    image: "/images/clientel/RANDOX.svg",
    altText: "partner",
    link: "#",
  },
  {
    id: 12,
    image: "/images/clientel/SURYA.svg",
    altText: "partner",
    link: "#",
  },
  {
    id: 13,
    image: "/images/clientel/THOLASI.svg",
    altText: "partner",
    link: "#",
  },
];

const PartnerSlider = ({Clientel}) => {
  console.log(Clientel)
  return (
    <>
      <div className="partner-area">
        <div className="container">
          <div className="position-relative">
            <Swiper
              spaceBetween={30}
              navigation={{
                nextEl: ".custom-swiper-button-next",
                prevEl: ".custom-swiper-button-prev",
              }}
              breakpoints={{
                0: {
                  slidesPerView: 2,
                },
                576: {
                  slidesPerView: 3,
                },
                768: {
                  slidesPerView: 4,
                },
                992: {
                  slidesPerView: 5,
                },
              }}
              autoplay={{
                delay: 3000,
             
              }}
              loop={true}
              modules={[Autoplay ,Navigation]}
              className="partner-slides position-relative"
            >
              {Clientel &&
                Clientel?.map((logo) => (
                  <SwiperSlide className="single-partner-item" key={logo.id}>
                    <Image
                      src={cleanImage(logo?.logos[0]?.url)}
                      alt={logo.altText}
                      className="img-fluid image"
                      layout="fill"
                    />
                  </SwiperSlide>
                ))}
            </Swiper>
          
          <div className="cust_nav mt-4 mt-md-0">
            <SwiperNav />
          </div>
          </div>
        </div>
      </div>
    </>
  );
};

export default PartnerSlider;