"use client";
import Slider from "react-slick"; 
import { useLanguage } from "@/contexts/LanguageContext";

function PrevArrow(props: any) {
  const { onClick } = props;
  return (
    <button
      className={`slide-arrow azzle-t-slider-prev `}
      onClick={onClick}
    >
    </button>
  );
}

function NextArrow(props: any) {
  const { onClick } = props;
  return (
    <button
      className={`slide-arrow azzle-t-slider-next `}
      onClick={onClick}
    >
    </button>
  );
}




export default function TestimonialHomeTwo() {
  const { t } = useLanguage();

  const settings = {
    slidesToShow: 1,
    slidesToScroll: 1,
    autoplay: false,
    infinite: true,
    speed: 1500,
    lazyLoad: "progressive" as const,
    arrows: true,
    prevArrow: <NextArrow />,
    nextArrow: <PrevArrow />,
  };


  return (
    <div className="azzle-section-padding">
      <div className="container">
        <div className="azzle-section-title center font-title max-width-750">
          <h2>{t("testimonial.title")}</h2>
        </div>
        <Slider {...settings} className="azzle-t-slider-init">
          <div className="azzle-t-wrap">
            <div className="azzle-t-thumb" data-aos="zoom-in" data-aos-delay="500">
              <picture>
                <source type="image/webp" srcSet="/assets/images/home2/responsive/t-thumb1-320.webp 320w, /assets/images/home2/responsive/t-thumb1-526.webp 526w" sizes="(max-width: 768px) 80vw, 420px" />
                <img src="/assets/images/home2/t-thumb1.png" alt="Customer testimonial" width={526} height={494} loading="lazy" decoding="async" />
              </picture>
            </div>
            <div className="azzle-default-content content4" data-aos="fade-up" data-aos-delay="700">
              <h3>"{t("testimonial1.quote")}"</h3>
              <p>{t("testimonial1.text")}</p>
              <div className="mt-50">
                <div className="azzle-t-author-title">
                  <p>-{t("testimonial1.name")}</p>
                  <span>{t("testimonial1.title")}</span>
                </div>
              </div>
            </div>
          </div>
          <div className="azzle-t-wrap">
            <div className="azzle-t-thumb">
              <picture>
                <source type="image/webp" srcSet="/assets/images/home2/responsive/t-thumb2-320.webp 320w, /assets/images/home2/responsive/t-thumb2-526.webp 526w" sizes="(max-width: 768px) 80vw, 420px" />
                <img src="/assets/images/home2/t-thumb2.png" alt="Customer testimonial" width={526} height={494} loading="lazy" decoding="async" />
              </picture>
            </div>
            <div className="azzle-default-content content4">
              <h3>"{t("testimonial2.quote")}"</h3>
              <p>{t("testimonial2.text")}</p>
              <div className="mt-50">
                <div className="azzle-t-author-title">
                  <p>-{t("testimonial2.name")}</p>
                  <span>{t("testimonial2.title")}</span>
                </div>
              </div>
            </div>
          </div>
          <div className="azzle-t-wrap">
            <div className="azzle-t-thumb">
              <picture>
                <source type="image/webp" srcSet="/assets/images/home2/responsive/t-thumb3-320.webp 320w, /assets/images/home2/responsive/t-thumb3-526.webp 526w" sizes="(max-width: 768px) 80vw, 420px" />
                <img src="/assets/images/home2/t-thumb3.png" alt="Customer testimonial" width={526} height={494} loading="lazy" decoding="async" />
              </picture>
            </div>
            <div className="azzle-default-content content4">
              <h3>"{t("testimonial3.quote")}"</h3>
              <p>{t("testimonial3.text")}</p>
              <div className="mt-50">
                <div className="azzle-t-author-title">
                  <p>-{t("testimonial3.name")}</p>
                  <span>{t("testimonial3.title")}</span>
                </div>
              </div>
            </div>
          </div>
        </Slider>
      </div>
    </div>
  )
}