"use client";

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

interface CustomerType {
  id: number;
  name?: string | null;
  avatar?: string | null;
  title?: string | null;
  content?: string | null;
  order?: number | null;
  status?: string | null;
  createTime?: Date | null;
  updateTime?: Date | null;
}

export default function Services() {
  const [swiperRef, setSwiperRef] = useState<SwiperClass | null>(null);
  const [customerList, setCustomerList] = useState<CustomerType[] | null>(null);

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

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

  useEffect(() => {
    fetchCustomers().then(({ data: list }) => {
      const records = [...list?.records];
      setCustomerList(records);
    });
  }, []);

  return (
    <div className={styles.customer}>
      <div className={styles["customer-container"]}>
        <div className={styles["main-content"]}>
          <div className={styles.content1}>客户声音</div>
          <div className={styles.content2}>10余年来，高潜服务并长期陪伴了多家大型集团及中小型企业，他们如是说...</div>
        </div>
        <div className={styles["main-details"]}>
          <span className={styles["content-nav"]} onClick={() => slideToPrev()}>
            <GoChevronLeft />
          </span>
          <div className={styles["swiper-wrapper"]}>
            <Swiper
              spaceBetween={30}
              initialSlide={0}
              loop={true}
              parallax={true}
              slidesPerGroup={isMobile ? 1 : 2}
              slidesPerView={isMobile ? 1 : 2}
              onSwiper={setSwiperRef}
            >
              {customerList?.map((item, index) => {
                return (
                  <SwiperSlide key={index}>
                    <div className={styles["col-md-5"]}>
                      <div className={styles["card-item"]}>
                        <div className={styles["circle-box"]}>
                          <Image alt="avatar" width={96} height={96} className={styles.img} src={item.avatar!} />
                        </div>
                        <div className={styles["card-content"]}>
                          <div className={styles.group}>
                            <div className={styles["card-content1"]}>{item.name}</div>
                            <div className={styles["card-content2"]}>{item.title}</div>
                          </div>
                          <div className={styles["card-content3"]}>{item.content}</div>
                        </div>
                      </div>
                    </div>
                  </SwiperSlide>
                );
              })}
            </Swiper>
          </div>
          <div className={styles["content-nav"]} onClick={() => slideToNext()}>
            <GoChevronRight />
          </div>
        </div>
      </div>
    </div>
  );
}
