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

SwiperCore.use([Autoplay, Navigation])

interface IProps {
  data: {
    id: string
    image: ImageComponent
    title: string
    description: string
  }[]
}

const JoinUsSwiper: React.FC<IProps> = ({ data }) => {
  return (
    <Container>
      <div className={cls(styles.joinUsSwiper, "common-center-container")}>
        <div className={styles.swiperBox}>
          <Swiper
            navigation={{
              nextEl: ".swiper-button-next-out",
              prevEl: ".swiper-button-prev-out",
            }}
            loop={true}
            autoplay={{
              delay: 5000,
              disableOnInteraction: false,
            }}
            loopedSlides={data.length}
          >
            {data.map(item => (
              <SwiperSlide key={item.id}>
                <div
                  className={styles.swiperCard}
                  style={{
                    backgroundImage: `url(${item.image.media.url})`,
                  }}
                >
                  {item.title && (
                    <h2 className={cls(styles.text, "pb-2")}>{item.title}</h2>
                  )}
                  {item.description && (
                    <p className={styles.text}>{item.description}</p>
                  )}
                </div>
              </SwiperSlide>
            ))}
          </Swiper>
          <div className="swiper-button-prev swiper-button-prev-out">
            <Icon name="chevron-right" />
          </div>
          <div className="swiper-button-next swiper-button-next-out">
            <Icon name="chevron-right" />
          </div>
        </div>
      </div>
    </Container>
  )
}

export default JoinUsSwiper