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'>
      <h1 className='font-semibold text-[14px] sm:text-h-lg mb-4'>
        Ulasan Konsumen Kami
      </h1>

      <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;