"use client";

import React, { useState, useEffect } from "react";
import { isMobile } from "react-device-detect";
import Image from "next/image";
import { Swiper, SwiperSlide, SwiperClass } from "swiper/react";
import "swiper/css";
import styles from "./consultant.module.scss";
import { GoChevronLeft, GoChevronRight } from "react-icons/go";
import { fetchConsultants } from "@/lib/cms";

interface ConsultantType {
  id: number;
  cnName?: string | null;
  enName?: string | null;
  title?: string | null;
  desc?: string | null;
  photo?: string;
  order?: number | null;
  createTime?: Date | null;
  updateTime?: Date | null;
  status?: string | null;
}

const Consultant: React.FC = () => {
  const [swiperRef, setSwiperRef] = useState<SwiperClass | null>(null);
  const [consulantList, setConsulantList] = useState<ConsultantType[] | null>(null);
  useEffect(() => {
    fetchConsultants().then(({ data: list }) => {
      const records = [...list?.records, ...list?.records];
      setConsulantList(records);
    });
  }, []);

  const slideToNext = () => {
    swiperRef?.slideNext();
  };

  const slideToPrev = () => {
    swiperRef?.slidePrev();
  };

  return (
    <div className={styles.consultant}>
      <div className={styles["consultant-container"]}>
        <div className={styles["consultant-content"]}>
          <div className={styles.content1}>高潜顾问</div>
        </div>
        <div className={styles["consultant-details"]}>
          <span className={styles["content-nav"]} onClick={() => slideToPrev()}>
            <GoChevronLeft />
          </span>
          <div className={styles["swiper-wrapper"]}>
            <Swiper spaceBetween={30} loop={true} slidesPerView={isMobile ? 1 : 4} onSwiper={setSwiperRef}>
              {consulantList?.map((item, index) => {
                return (
                  <SwiperSlide key={index}>
                    <a href={`/partner/${item.id}`} className={styles["col-md-4"]}>
                      <div className={styles.media}>
                        <Image alt="photo" width={250} height={194} src={item.photo!} />
                      </div>

                      <div className={styles["card-content"]}>
                        <div className={styles.content3}>{item.cnName}</div>
                        <div className={styles.content4}>{item.title}</div>
                      </div>
                    </a>
                  </SwiperSlide>
                );
              })}
            </Swiper>
          </div>
          <span className={styles["content-nav"]} onClick={() => slideToNext()}>
            <GoChevronRight />
          </span>
        </div>
      </div>
    </div>
  );
};

export default Consultant;
