import React, { useState } from 'react';
import Slider from "react-slick";
import "slick-carousel/slick/slick.css";
import "slick-carousel/slick/slick-theme.css";
import Image from 'next/image';
import { useTranslation } from 'next-i18next';

import ts1 from '/public/images/testimonial/1.png';
import ts2 from '/public/images/testimonial/2.png';
import ts3 from '/public/images/testimonial/3.png';
import testiImage from '/public/images/home/quotes.webp';

const images = [ts1, ts2, ts3];

const Testimonial = (props) => {
  const { t } = useTranslation('(home)/testimonial');
  const [nav1, setNav1] = useState();
  const [nav2, setNav2] = useState();

  const testimonials = t('testimonials', { returnObjects: true });

  return (
    <section className={`wpo-testimonial-section section-padding ${props.tmClass}`}>
      <div className="container">
        <div className="wpo-testimonial-wrap">
          <div className="row align-items-center">
            <div className="col-lg-6 col-12 order-lg-1 order-2">
              <div className="testimonial-left">
                <div className="testimonial-left-inner">
                  <div className="left-slide">
                    <div className="testimonial-img">
                      <Image src={testiImage} alt="testimonial quote image" />
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div className="col-lg-6 col-12 order-lg-1 order-1">
              <div className="wpo-testimonial-items">
                <div className="right-slide">
                  <Slider asNavFor={nav2} ref={(slider1) => setNav1(slider1)} dots={true} arrows={false}>
                    {testimonials.map((item, index) => (
                      <div className="wpo-testimonial-item" key={index}>
                        <div className="wpo-testimonial-text">
                          <i className="fi flaticon-right-quote-sign"></i>
                          <p>“{item.description}”</p>
                          {/* <div className="wpo-testimonial-text-btm">
                            <div className="wpo-testimonial-text-btm-img">
                              <Image src={images[index]} alt={item.name} />
                            </div>
                            <div className="wpo-testimonial-text-btm-info">
                              <h3>{item.name}</h3>
                              <span>{item.position}</span>
                            </div>
                          </div> */}
                        </div>
                      </div>
                    ))}
                  </Slider>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

export default Testimonial;