import React, { useEffect, useState } from "react";
import { Link } from "react-router-dom";
import blogOne from "../../assets/images/blog/1.jpg";
import BlogData from "../../Services/BlogData";

/**
 * Fetches blog data from an API and renders the blogs on the page.
 * Displays a maximum of six blogs on the home page and all blogs on other pages.
 *
 * @param {string} pathname - The current path of the page.
 * @returns {JSX.Element} - The rendered HTML of the blogs component.
 */
function Blogs({ pathname }) {
  const [blogs, setBlogs] = useState([]);

  useEffect(() => {
    const fetchBlogData = async () => {
      try {
        const res = await BlogData();
        setBlogs(res.data);
      } catch (err) {
        console.log("Error loading blogdata", err);
      }
    };

    fetchBlogData();
  }, []);

  const renderBlogItem = (blog) => {
    const options = {
      weekday: "short",
      year: "numeric",
      month: "long",
      day: "numeric",
    };
    const postDt = new Date(blog.post_date).toLocaleDateString(
      "en-US",
      options
    );
    const blgImg =
      blog.meta_value != null
        ? `${blogs?.blogconfig?.media_url}/${blog.meta_value}`
        : blogOne;

    return (
      <div key={blog.id} className="col-lg-4 col-md-6">
        <div
          className="appie-blog-item mt-30 wow animated fadeInUp"
          data-wow-duration="3000ms"
          data-wow-delay="200ms"
        >
          <Link to={`/blog/blogdetail/${blog?.id}`} className="thumb">
            <img
              src={blgImg}
              alt={blog.post_title}
              style={{ cursor: "pointer" }}
            />
          </Link>
          <div className="content">
            <div className="blog-meta">
              <ul>
                <li style={{ cursor: "pointer" }}>{postDt}</li>
              </ul>
            </div>
            <h3 className="title">
              <Link to={`/blog/blogdetail/${blog?.id}`}>{blog.post_title}</Link>
            </h3>
            <Link to={`/blog/blogdetail/${blog?.id}`}>
              Learn More <i className="fal fa-arrow-right" />
            </Link>
          </div>
        </div>
      </div>
    );
  };

  return (
    <>
      <div className="row">
        {pathname === "/" // ON HOME PAGE LIMIT TO SIX(6) BLOGS
          ? blogs?.blogdata?.slice(0, 6).map(renderBlogItem)
          : // ON OTHER PAGES SHOW ALL BLOG
            blogs?.blogdata?.map(renderBlogItem)}
      </div>
    </>
  );
}

export default Blogs;