"use client";
import { useRef, useEffect } from "react";
import Image from "next/image";
import { Swiper, SwiperSlide } from "swiper/react";
import { Pagination, Autoplay, EffectCoverflow } from "swiper/modules";

import "swiper/css";
import "swiper/css/pagination";
import "swiper/css/effect-coverflow";

import { AWS_CDN_URL, CDN_URL } from "@/utils/staticValues";
import "./dhStyle.css";

// Strong typing for team members
interface TeamMember {
  id: string;
  name: string;
  role: string;
  years_of_experience: number | string;
  bio: string;
  artisan_profile_photo: string;
}

interface DHTeamProps {
  teamMembers?: TeamMember[];
}

const sliderSettings = {
  320: {
    slidesPerView: 1.6,
  },
  680: {
    slidesPerView: 2,
  },
  1024: {
    slidesPerView: 3,
  },
};

export default function DHTeam({ teamMembers = [] }: DHTeamProps) {
  //console.log('teamMembers',teamMembers);
  const swiperRef = useRef<any>(null);

  useEffect(() => {
    // Sometimes autoplay doesn't start until the swiper is interacted with.
    if (swiperRef.current && swiperRef.current.autoplay) {
      swiperRef.current.autoplay.start();
    }
  }, []);

  if (!Array.isArray(teamMembers) || teamMembers.length === 0) return null;

  return (
    <div className="flex w-full flex-col">
      <Swiper
        onSwiper={(swiper) => (swiperRef.current = swiper)}
        modules={[EffectCoverflow, Pagination, Autoplay]}
        effect="coverflow"
        grabCursor={false} // Prevents unwanted pause
        centeredSlides={true}
        loop={true}
        spaceBetween={4}
        speed={2000}
        autoplay={{
          delay: 2500,
          disableOnInteraction: false,
          pauseOnMouseEnter: true,
        }}
        breakpoints={sliderSettings}
        pagination={{ clickable: true }}
        coverflowEffect={{
          rotate: 64,
          stretch: 0,
          depth: 130,
          modifier: 1,
          slideShadows: false,
        }}
        className="team-swiper dh-bullet"
        style={{ paddingBottom: 60 }}
      >
        {teamMembers &&
          teamMembers.map((item: any, index) => (
            <SwiperSlide key={`${item.id}_${index}`} className="relative p-2">
              <span className="hairline team-card absolute top-0 left-0 z-10 h-full w-full"></span>
              <div className="team-card-wrap relative z-20 flex flex-col gap-5 p-2 md:p-10">
                <div className="flex w-full items-center justify-center">
                  <div className="border-1">
                    <Image
                      src={`${AWS_CDN_URL}/${item?.artisan_profile_photo}`}
                      height={600}
                      width={600}
                      className="img-responsive"
                      alt={item.name}
                    />
                  </div>
                </div>
                <div className="relative z-40 flex flex-col">
                  <div className="font-bogart text-xl/4">{item.name}</div>
                  <div className="team-role text-xs">{item.role}</div>
                  <div className="team-role text-xs">
                    {item.years_of_experience} years of experience
                  </div>
                  {/* <div className="flex w-full pt-2 text-xs">{item.role}</div> */}
                  <div className="mt-4 line-clamp-5 flex w-full border-t-1 py-2 text-xs">
                    {item.bio}
                  </div>
                </div>
              </div>
            </SwiperSlide>
          ))}
      </Swiper>
    </div>
  );
}