import * as React from "react"
import { graphql, useStaticQuery } from "gatsby"
import SwiperCore, { Autoplay, Pagination, Navigation } from "swiper"
import { Swiper, SwiperSlide } from "swiper/react"
import { Container } from "@/components"

import * as styles from "./index.module.scss"
import SlideItem from "@/components/case/client-referral/slide-item"

SwiperCore.use([Autoplay, Pagination, Navigation])

const ClientReferral = (): React.ReactElement => {
  const data = useStaticQuery<ClientReferralQuery>(graphql`
    query ClientReferralQuery {
      allStrapiCasesCustomerTestimonials {
        nodes {
          id
          personName
          professionalTitle
          quote
        }
      }
    }
  `)

  const {
    allStrapiCasesCustomerTestimonials: { nodes },
  } = data
  return (
    <section className={styles.clientReferral}>
      <Container className={styles.container}>
        <Swiper
          pagination={{ clickable: true }}
          navigation={true}
          loop={true}
          autoplay={{
            delay: 5000,
            disableOnInteraction: false,
          }}
        >
          {nodes.map((node, i) => (
            <SwiperSlide key={i}>
              <SlideItem
                clientName={node.personName}
                clientTitle={node.professionalTitle}
                content={node.quote}
                classname={styles.slideItem}
              />{" "}
            </SwiperSlide>
          ))}
        </Swiper>
      </Container>
    </section>
  )
}

export default ClientReferral