import DesktopView from '@/core/components/views/DesktopView'
import MobileView from '@/core/components/views/MobileView'
import Image from 'next/image'
import { Swiper, SwiperSlide } from 'swiper/react'
import { Autoplay } from 'swiper'

const { useQuery } = require('react-query')
const { getCustomerReviews } = require('../api/customerReviewsApi')

const CustomerReviews = () => {
  const { data: customerReviews } = useQuery('customerReviews', getCustomerReviews)

  return (
    <div className='px-4 sm:px-0'>
      <div className='font-semibold sm:text-h-lg mb-4'>Ulasan Konsumen Kami</div>

      <DesktopView>
        <Swiper slidesPerView={3.2} spaceBetween={16} {...swiperProps}>
          {customerReviews &&
            customerReviews?.map((customerReview) => (
              <SwiperSlide className='pb-4' key={customerReview.id}>
                <Card customerReview={customerReview} />
              </SwiperSlide>
            ))}
        </Swiper>
      </DesktopView>

      <MobileView>
        <Swiper slidesPerView={1.1} spaceBetween={8} {...swiperProps}>
          {customerReviews &&
            customerReviews?.map((customerReview) => (
              <SwiperSlide className='pb-4' key={customerReview.id}>
                <Card customerReview={customerReview} />
              </SwiperSlide>
            ))}
        </Swiper>
      </MobileView>
    </div>
  )
}

const swiperProps = {
  autoplay: {
    delay: 6000,
    disableOnInteraction: false
  },
  loop: true,
  modules: [Autoplay]
}

const Card = ({ customerReview }) => (
  <div className='bg-gray-200 rounded-md px-5 py-6 shadow-md shadow-gray-500/20 h-full'>
    <div className='flex items-center space-x-3 mb-4'>
      <Image
        src={customerReview.image}
        alt={customerReview.customerName}
        width={48}
        height={48}
        className='rounded-full border border-yellow-400'
      />
      <div className='text-body-2 sm:text-body-1 font-semibold leading-6 text-gray-900'>
        {customerReview.customerName}
      </div>
    </div>
    <div
      className='leading-7 text-gray-800'
      dangerouslySetInnerHTML={{ __html: customerReview.ulasan }}
    />
  </div>
)

export default CustomerReviews