import Image from "next/image";
import React, { useState } from "react";

import { Swiper, SwiperSlide } from "swiper/react";

import { Navigation, Autoplay } from "swiper/modules";
import StarRatings from 'react-star-ratings';

import { fadeIn, zoomIn, slideFromLeft, slideFromRight } from "../animationvariants.js";
import { motion } from "framer-motion";
// Import Swiper styles
import "swiper/css";
import "swiper/css/pagination";
import "swiper/css/navigation";

const Testimonial = ({ testimonial }) => {
  const [rating, setRating] = useState(0);

  const handleRatingChange = (newRating) => {
    setRating(newRating);
  };
  return (
    <>
      <section className="testimonial-session">
        <div className="container">
          <div className="row">
            <div className="col-12">
              <div className="testimonial-carousal position-relative">
                <Swiper
                  slidesPerView={1}
                  autoplay={{
                    delay: 9000,
                    disableOnInteraction: false
                  }}
                  autoHeight={true}
                  spaceBetween={10}
                  navigation={{ nextEl: ".testimonial-arrow-left", prevEl: ".testimonial-arrow-right" }}
                  modules={[Navigation, Autoplay]}
                  className="mySwiper01 mySwiper02"
                >
                  {testimonial?.data &&
                    testimonial?.data.map((data, index) => {
                      return (
                        <SwiperSlide>
                          <motion.div variants={zoomIn("left", 0.3)} initial={"hidden"} whileInView={"show"} viewport={{ once: false, amount: 0.2 }}>
                            <div className="testimonial-item">
                              <div className="img">
                                <span className="image-container">
                                  <Image layout="fill" alt="" className="image img-fluid" src="/images/testimonial/01.png" />
                                </span>
                              </div>
                              <div className="rating">
                              <StarRatings
                                rating={rating}
                                starRatedColor="yellow" // Set the rated color to yellow
                                starHoverColor="yellow" // Set the hover color to yellow
                                changeRating={handleRatingChange}
                                numberOfStars={5}
                                name='rating'
                                starDimension="16px" // Set star width and height
                              />
                              {/* <p>You rated this: {rating} stars</p> */}
                                {/* <a href="">
                                  <span className="image-container">
                                    <Image layout="fill" className="image img-fluid" alt="" src="/images/icons/star.svg" />
                                  </span>
                                </a>
                                <a href="">
                                  <span className="image-container">
                                    <Image layout="fill" className="image img-fluid" alt="" src="/images/icons/star.svg" />
                                  </span>
                                </a>
                                <a href="">
                                  <span className="image-container">
                                    <Image layout="fill" className="image img-fluid" alt="" src="/images/icons/star.svg" />
                                  </span>
                                </a>
                                <a href="">
                                  <span className="image-container">
                                    <Image layout="fill" className="image img-fluid" alt="" src="/images/icons/star.svg" />
                                  </span>
                                </a>
                                <a href="">
                                  <span className="image-container">
                                    <Image layout="fill" className="image img-fluid" alt="" src="/images/icons/star.svg" />
                                  </span>
                                </a> */}
                                {/* <a href="">
                            <span className='fa fa-star'>
                                <Image layout='fill' alt='' src="/images/icons/star.svg" />
                            </span>
                        </a> */}
                              </div>
                              <div className="disc">{data?.attributes?.description}</div>
                              <div className="name">{data?.attributes?.title}</div>
                            </div>
                          </motion.div>
                        </SwiperSlide>
                      );
                    })}
                </Swiper>
                <div className="swiper-nav">
                  <div className="navbutton d-flex  justify-content-between justify-content-md-between ">
                    <button className="testimonial-arrow-right arrow" id="testimonial-arrow-right" aria-label="testimonial-arrow-right">
                      <span className="image-container">
                        <Image layout="fill" alt="" className="image img-fluid" src="/images/icons/arrow-left.svg" />
                      </span>
                    </button>
                    <button className="testimonial-arrow-left arrow" id="testimonial-arrow-left" aria-label="testimonial-arrow-left">
                      <span className="image-container">
                        <Image layout="fill" alt="" className="image img-fluid" src="/images/icons/arrow-right.svg" />
                      </span>
                    </button>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
    </>
  );
};

export default Testimonial;