import React, { useEffect, useState } from "react";
import "./Food_and_wellness_journal.css";
import Green_round_btn from "../../common-components/common_btn/green_round_btn/Green_round_btn";
import { useDispatch, useSelector } from "react-redux";
import { getblog, getblogById } from "../../../features/blog/Slice";
import { Link } from "react-router-dom";
import Green_Outline_Btn from "../../common-components/common_btn/green_outline_btn/Green_Outline_Btn";
import Blog_card from "../../blog/blog_card/Blog_card";

function Food_and_wellness_journal() {
  const blogData = useSelector((state) => state.blog.blog);
  const dispatch = useDispatch();
  useEffect(() => {
    dispatch(getblog());
  }, [dispatch]);

  return (
    <>
      {blogData && blogData?.data?.length > 0 ? (
        <section className="Food_and_wellness_journal">
          <div className="container-fluid">
            <div className="all_blogs_div">
              <div className="row">
                {blogData?.data?.slice(0,3)?.map((blog) => (
                  <div className="col-lg-3 col-sm-6 mb-3">
                    <Blog_card
                      baseLink={`/blog-inner/${blog.id}`}
                      blogData={blog}
                    />
                  </div>
                ))}
              </div>
            </div>

            {/* old code */}
            {/* <>
              <div className="heading_holder">
                <h4 className="heading_text">FOOD & WELLNESS JOURNALs</h4>
              </div>
              <div className="row">
                <div className="col-md-5 col-sm-5 col-12">
                  <div className="main_img_holder">
                    <div className="row">
                      <div className="col-md-12 ">
                        <div className="img_holder">
                          <img
                            className="Product_img"
                            src={
                              process.env.NEXT_PUBLIC_IMG_URL +
                              blogData?.data[0]?.image
                            }
                            alt={"Product_img"}
                          />
                        </div>
                      </div>
                      <div className="col-md-12 ">
                        <div className="text_holder">
                          <h4>{blogData?.data[0]?.name}</h4>
                          <p>{blogData?.data[0]?.subname}</p>
                          <Link to={`/blog-inner/${blogData?.data[0]?.id}`}>
                            <Green_Outline_Btn btnText={"Read More"} />
                          </Link>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div className="col-md-7 col-sm-7 col-12">
                  <div className="sub_images_list_holder">
                    <div className="sub_images_holder">
                      {blogData?.data?.map((blog) => (
                        <div className="row mb-3">
                          <div className="col-md-4 col-sm-4 col-4">
                            <div className="img_holder">
                              <img
                                className="Product_img"
                                src={
                                  process.env.NEXT_PUBLIC_IMG_URL + blog?.image
                                }
                                alt={"Product_img"}
                              />
                            </div>
                          </div>
                          <div className="col-md-8 col-sm-8 col-8">
                            <div className="text_holder">
                              <h4>{blog?.name}</h4>
                              <p>{blog?.subname}</p>
                              <Link to={`/blog-inner/${blog.id}`}>
                                <Green_Outline_Btn btnText={"Read More"} />
                              </Link>
                            </div>
                          </div>
                        </div>
                      ))}
                    </div>
                  </div>
                </div>
              </div>
            </> */}
          </div>
        </section>
      ) : (
        <></>
      )}
    </>
  );
}

export default Food_and_wellness_journal;
