Untitled

'use client';
import { useWindowDimensions } from '@/app/utils/WindowDimensions';
import { getShuffledGroupedReviews } from '@/app/utils/getShuffledGroupedReviews';
import { useGetReviewsQuery } from '@/features/review/reviewApi';
import { useRef } from 'react';
import { HiOutlineArrowLongLeft, HiOutlineArrowLongRight } from 'react-icons/hi2';
import Slider from 'react-slick';
import 'slick-carousel/slick/slick-theme.css';
import 'slick-carousel/slick/slick.css';
import ClientReviewText from './ClientReviewText';
import ClientReviewVideo from './ClientReviewVideo';
import CustomDots from './CustomDots';
import StoryShimmer from './Shimmer/StoryShimmer';

function SampleNextArrow(props) {
  const { className, style, onClick } = props;
  return (
    <div className={`${className} ${style.customArrow} ${style.nextArrow}`} onClick={onClick}>
      <HiOutlineArrowLongRight />
    </div>
  );
}

function SamplePrevArrow(props) {
  const { className, style, onClick } = props;
  return (
    <div className={`${className} ${style.customArrow} ${style.prevArrow}`} onClick={onClick}>
      <HiOutlineArrowLongLeft />
    </div>
  );
}

const clients = [
  {
    name: 'Chan Mia ',
    description:
      'Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature.piece of classical Latin literature.',
  },
  {
    name: 'Nel Patel ',
    description:
      'Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature.piece of classical Latin literature.',
  },
  {
    name: 'Joe Root ',
    description:
      'Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature.piece of classical Latin literature.',
  },
];

export default function ClientReview() {
  const { width, height } = useWindowDimensions();

  const { data: reviews, isLoading } = useGetReviewsQuery({});

  const sliderRef = useRef(null);

  const next = () => {
    sliderRef.current?.slickNext();
  };

  const previous = () => {
    sliderRef.current?.slickPrev();
  };

  // const settings = {
  //   infinite: true,
  //   speed: 500,
  //   slidesToScroll: 3,
  //   slidesToShow: 3,
  //   autoplay: true,
  //   arrows: false,
  //   autoplaySpeed: 5000,
  //   adaptiveHeight: true,
  //   nextArrow: <SampleNextArrow />,
  //   prevArrow: <SamplePrevArrow />,
  //   dots: false,
  //   responsive: [
  //     {
  //       breakpoint: 1024,
  //       settings: {
  //         slidesToShow: 2,
  //         slidesToScroll: 2,
  //         infinite: true,
  //         dots: false,
  //       },
  //     },
  //     {
  //       breakpoint: 768,
  //       settings: {
  //         slidesToShow: 1,
  //         slidesToScroll: 1,
  //         initialSlide: 0,
  //         dots: false,
  //       },
  //     },
  //   ],
  // };
  const settings = {
    dots: true,
    infinite: true,
    speed: 500,
    slidesToShow: 1, // Show 1 review per slide initially
    slidesToScroll: 1,
    autoplay: false,
    autoplaySpeed: 5000,
    customPaging: (i) => <button>{i + 1}</button>,
    appendDots: (dots) => <CustomDots dots={dots} />,
  };

  return (
    <>
      {getShuffledGroupedReviews(reviews?.data.docs).length === 0 && (
        <div className="slider-container">
          <div className="w-full px-4 py-20">
            <div className="w-full text-center uppercase text-black">
              <h4 className="font-lg mb-3 text-sm uppercase tracking-wider md:mb-6 md:text-lg lg:text-base">Client Reviews</h4>
              <h1 className=" font-marcellus text-2xl font-normal leading-8 tracking-wider sm:text-3xl md:text-4xl xl:text-[42px]">
                What our client says
              </h1>
            </div>

            <div className="relative w-full">
              {isLoading || getShuffledGroupedReviews(reviews?.data.docs).length === 0 ? (
                <StoryShimmer />
              ) : (
                <div>
                  {width > 992 ? (
                    <Slider ref={sliderRef} {...settings}>
                      {getShuffledGroupedReviews(reviews?.data.docs).map((group, index) => (
                        <div key={index}>
                          <div className="flex items-center justify-between">
                            {group.map((review) => (
                              <div key={review.id}>{review.videos.length > 0 ? <ClientReviewVideo /> : <ClientReviewText review={review} />}</div>
                            ))}
                          </div>
                        </div>
                      ))}
                    </Slider>
                  ) : (
                    <Slider ref={sliderRef} {...settings}>
                      {reviews?.data?.docs.map((review, index) => (
                        <div key={index}>
                          <div key={review.id}>{review.videos.length > 0 ? <ClientReviewVideo /> : <ClientReviewText review={review} />}</div>
                        </div>
                      ))}
                    </Slider>
                  )}
                </div>
              )}

              <div className="absolute bottom-80 w-full">
                <button className="button absolute -left-6 z-20 rounded-full border p-1 md:-left-9  md:p-2 " onClick={previous}>
                  <HiOutlineArrowLongLeft className="text-xl text-[#B4A58E] md:text-2xl " />
                </button>

                <button className="button absolute -right-6 z-20 rounded-full border p-1 md:-right-9 md:p-2 " onClick={next}>
                  <HiOutlineArrowLongRight className="text-xl text-[#B4A58E] md:text-2xl " />
                </button>
              </div>

              <div className="mt-6 flex w-full items-center justify-center gap-5 px-[10px] md:mt-12">
                <div className="rounded-full border border-[#1DC5CE] p-3">
                  <div className="h-[8px]  w-[8px] rounded-full bg-[#1DC5CE]"></div>
                </div>
                <div className="h-[8px] w-[8px] rounded-full bg-[#0E2331]"></div>
                <div className="h-[8px] w-[8px] rounded-full bg-[#0E2331]"></div>
              </div>
            </div>
          </div>
        </div>
      )}
    </>
  );
}