import * as React from "react"
import { Container, Icon } from "@/components"
import SwiperCore, { Autoplay, Pagination, Navigation } from "swiper"
import { Swiper, SwiperSlide } from "swiper/react"
import t from "@/constants/wording"
import * as styles from "./index.module.scss"

SwiperCore.use([Autoplay, Pagination, Navigation])
interface IProps {
  data: TheirComment[]
}

const TheirComment: React.FC<IProps> = ({ data }) => {
  const SwiperAttrs = {
    navigation: {
      nextEl: ".swiper-button-next-out",
      prevEl: ".swiper-button-prev-out",
    },
  }
  return (
    <div className={styles.theirComment}>
      <Container isSmall={true}>
        <h2>{t("their evaluation")}</h2>
        <div className={styles.swiperContent}>
          <Swiper
            {...SwiperAttrs}
            pagination={{ el: ".swiper-pagination", clickable: true }}
            loop={true}
            autoplay={{
              delay: 5000,
              disableOnInteraction: false,
            }}
            observer={true}
            observeParents={false}
          >
            {data.map(list => (
              <SwiperSlide key={list.id}>
                <div className={styles.inner}>
                  <img alt={list.Logo.alt} src={list.Logo.media.url} />
                  <p className={styles.comment}>{list.Comment}</p>
                  <p className={styles.people}>
                    {list.personName}，{list.professionalTitle}
                  </p>
                </div>
              </SwiperSlide>
            ))}
          </Swiper>
          <div className="swiper-button-prev swiper-button-next-out">
            <Icon name="chevron-right" />
          </div>
          <div className="swiper-button-next swiper-button-prev-out">
            <Icon name="chevron-right" />
          </div>
          <div className="swiper-pagination"></div>
        </div>
      </Container>
    </div>
  )
}

export default TheirComment