import useResponsive from '@/lib/hooks/useResponsive';
import { useState } from 'react';
import Marquee from 'react-fast-marquee';
import { Rating } from 'react-simple-star-rating';
import 'slick-carousel/slick/slick-theme.css';
import 'slick-carousel/slick/slick.css';
import style from './index.module.scss';

const Testimonial = () => {
  const screenSize = useResponsive();


  const [rating, setRating] = useState(0);

  // Catch Rating value
  const handleRating = (rate: number) => {
    setRating(rate);

    // other logic
  };
  // Optinal callback functions
  const onPointerEnter = () => console.log('Enter');
  const onPointerLeave = () => console.log('Leave');
  const onPointerMove = (value: number, index: number) =>
    console.log(value, index);

  // Slick settings
  const FirstSlidersettings = {
    // autoplay: true,
    // autoplaySpeed: 1000,
    arrows: false,
    centerMode: true,
    centerPadding: '50px',
    dots: false,
    responsive: [
      {
        breakpoint: 3000,
        settings: {
          slidesToShow: 4,
        },
      },

      {
        breakpoint: 1024,
        settings: {
          slidesToShow: 2,
        },
      },
      {
        breakpoint: 464,
        settings: {
          slidesToShow: 1,
        },
      },
    ],
  };

  const SecondSliderSetting = {
    // autoplay: true,
    // autoplaySpeed: 1500,
    arrows: false,
    centerMode: true,
    centerPadding: '50px',
    dots: false,
    responsive: [
      {
        breakpoint: 3000,
        settings: {
          slidesToShow: 4,
        },
      },
      {
        breakpoint: 1024,
        settings: {
          slidesToShow: 2,
        },
      },
      {
        breakpoint: 464,
        settings: {
          slidesToShow: 1,
        },
      },
    ],
  };

  return (
    <div className={` happy-customer ${screenSize == 'large' && 'container'}`}>
      <div className={`${style.testimonialPage} py-sm-8`}>
        <h2
          className={`text-capitalize heading-3 AloveraFont text-center fw-bolder`}
        >
          Millions of{' '}
          <span className="text-primary-color"> happy customers</span>
        </h2>

        {/* First Carousel */}
        <div className="mt-5">
          <Marquee>
            {[...Array(10)].map((_item, index) => {
              return (
                <div
                  className={`${style.testimonialCard} p-xxl-3 p-2`}
                  key={index}
                >
                  <div className="d-flex justify-content-between align-items-center p-3">
                    <h2
                      className={`AloveraFont mb-0 fw-bolder fs-xxl-23 fs-sm-18 text-primary-color `}
                    >
                      5.0
                    </h2>

                    <Rating
                      onClick={handleRating}
                      onPointerEnter={onPointerEnter}
                      onPointerLeave={onPointerLeave}
                      onPointerMove={onPointerMove}
                      size={30}
                    />
                  </div>
                  <p
                    className={`para px-3  ${style.testimonialText} AloveraFont`}
                  >
                    Lorem ipsum dolor amet, consectetur adipiscing elit, sed do
                    eiusmod tempor incididunt ut labore.
                  </p>

                  <div className="d-flex mt-4 px-2 justify-content-start gap-3 align-items-center">
                    <img src="/images/website/user.png" alt="" />
                    <h5
                      className={`text-light-grey  fs-10 AloveraFont ${style.testimonialAuthor}`}
                    >
                      <b>John,</b> Cambridge, <b>MA</b>
                    </h5>
                  </div>
                </div>
              );
            })}
          </Marquee>
        </div>

        {/* Second Carousel */}
        <div className="mt-5">
          <Marquee direction="right">
            {[...Array(10)].map((_item, index) => {
              return (
                <div
                  className={`${style.testimonialCard} p-xxl-3 p-2`}
                  key={index}
                >
                  <div className="d-flex justify-content-between align-items-center p-3">
                    <h2
                      className={`AloveraFont mb-0 fw-bolder fs-xxl-23 fs-sm-18 text-primary-color `}
                    >
                      5.0
                    </h2>

                    <Rating
                      onClick={handleRating}
                      onPointerEnter={onPointerEnter}
                      onPointerLeave={onPointerLeave}
                      onPointerMove={onPointerMove}
                      size={30}
                    />
                  </div>
                  <p
                    className={`para px-3  ${style.testimonialText} AloveraFont`}
                  >
                    Lorem ipsum dolor amet, consectetur adipiscing elit, sed do
                    eiusmod tempor incididunt ut labore.
                  </p>

                  <div className="d-flex mt-4 px-2 justify-content-start gap-3 align-items-center">
                    <img src="/images/website/user.png" alt="" />
                    <h5
                      className={`text-light-grey  fs-10 AloveraFont ${style.testimonialAuthor}`}
                    >
                      <b>John,</b> Cambridge, <b>MA</b>
                    </h5>
                  </div>
                </div>
              );
            })}
          </Marquee>
        </div>
      </div>
    </div>
  );
};

export default Testimonial;