import React, { useEffect } from "react";
import "./Founding_farmers.css";
import Founding_farmers_card from "./founding_farmers_card/Founding_farmers_card";
import { useDispatch, useSelector } from "react-redux";
import { getFoundig_Farmers } from "../../../features/aboutus/aboutusSlice";

function Founding_farmers() {
  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="Founding_farmers">
        <div className="container-fluid">
          <div className="heading_holder text-center">
            <h4 className="heading_text">FOUNDING FARMERS</h4>
            <div className="row justify-content-center">
              {
                fouding_farmers?.data?.map((farmer) => (
                  <div className="col-md-4 col-sm-6 col-10 mx-auto mb-3">
                    <Founding_farmers_card
                      foudingFarmersData={farmer}
                    />
                  </div>
                ))
              }
            </div>
          </div>
        </div>
      </section>
    </>
  );
}

export default Founding_farmers;
