import dynamic from "next/dynamic";
import Image from "next/image";
import React from "react";
const OwlCarousel = dynamic(() => import("react-owl-carousel"), {
  ssr: false
});
const Testimonial = () => {
  const testimonialData = [
    {
      disc: "“Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud.”",
      name: "Erika Payne, Los Angeles CA"
    },
    {
      disc: "“Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud.”",
      name: "Erika Payne, Los Angeles CA"
    },
  ];
  const projects = {
    responsive: {
      0: {
        items: 1
      },
      450: {
        items: 1
      },
      600: {
        items: 1
      },
      1000: {
        items: 1
      }
    }
  };
  return (
    <>
      <section className="testimonial-session">
        <div className="container">
          <div className="row">
            <div className="col-12">
              <div className="testimonial-carousal">
                <OwlCarousel
                  className="owl-theme owl-custom01"
                  margin={50}
                  items={6}
                  dots={false}
                  nav={true}
                  responsive={projects.responsive}
                  autoplay={false}
                  autoplayTimeout={5000}
                  center={false}
                  loop={false}
                  touchDrag={true}
                >
                  <div className="item">
                    <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">
                        <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">
                        “Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                        quis nostrud.”
                      </div>
                      <div className="name">Erika Payne, Los Angeles CA</div>
                    </div>
                  </div>
                  {testimonialData &&
                    testimonialData.map(data => {
                      return (
                        <div className="item">
                          <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">
                              <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.disc}
                            </div>
                            <div className="name">{data.name}</div>
                          </div>
                        </div>
                      );
                    })}
                </OwlCarousel>
              </div>
            </div>
          </div>
        </div>
      </section>
    </>
  );
};

export default Testimonial;