"use client";
import Image from "next/image";
import { Swiper, SwiperSlide } from "swiper/react";
import "swiper/css";
import "swiper/css/effect-fade";
import "swiper/css/pagination";
import { Autoplay, EffectFade, Pagination } from "swiper/modules";
import { AWS_CDN_URL } from "@/utils/staticValues";


export default function CCProfileSwiper(imgProfile:any) {
 
  //console.log('imgProfile',imgProfile);
  return (
    <Swiper
      loop={true}
      effect={"fade"}
      pagination={{
        clickable: true,
      }}
      autoplay={{
        delay: 5000,
        disableOnInteraction: false,
      }}
      modules={[EffectFade, Pagination, Autoplay]}
      className="cc-profile-swiper bullet-white border-1"
      id="cc_profile_swiper"
    >
      {imgProfile?.imgProfile && imgProfile.imgProfile.map((item:any) => (
        <SwiperSlide key={item.id}>
          <Image
            src={`${AWS_CDN_URL}/${item.image}`}
            height={600}
            width={800}
            alt={item.alt}
            className="img-responsvie"
          />
        </SwiperSlide>
      ))}
    </Swiper>
  );
}