import React, { useEffect } from "react";
import "./Testimonials.css";
// Import Swiper React components
import { Swiper, SwiperSlide } from "swiper/react";
import "swiper/css";
import "swiper/css/navigation";
import { Navigation } from "swiper/modules";
import Testimonials_card from "./testimonials_card/Testimonials_card";
import { useDispatch, useSelector } from "react-redux";
import { getFoundig_Farmers } from "../../../features/aboutus/aboutusSlice";

function Testimonials() {
  const fouding_farmers = useSelector((state) => state.aboutus.fouding_farmers);
  const dispatch = useDispatch();
  useEffect(() => {
    dispatch(getFoundig_Farmers());
  }, [dispatch]);

  if (fouding_farmers == null) {
    return <></>;
  }
  return (
    <>
      <section className="Testimonials">
        <div className="container">
          <Swiper
            navigation={true}
            modules={[Navigation]}
            className="Testimonials_Swiper"
          >
            {fouding_farmers?.data?.map((val) => (
              <SwiperSlide>
                <Testimonials_card val={val}/>
              </SwiperSlide>
            ))}
            {/* <SwiperSlide><Testimonials_card /></SwiperSlide>
            <SwiperSlide><Testimonials_card /></SwiperSlide>
            <SwiperSlide><Testimonials_card /></SwiperSlide>
            <SwiperSlide><Testimonials_card /></SwiperSlide>
            <SwiperSlide><Testimonials_card /></SwiperSlide> */}
          </Swiper>
        </div>
      </section>
    </>
  );
}

export default Testimonials;
