import React from "react";
import { Link } from "react-router-dom";
import BlogImg1 from "../../assets/images/blog/p1.jpg";

/**
 * Renders a sidebar for a blog.
 * @param {Object} blogs - An object containing the data for the blog posts.
 * @returns {JSX.Element} - JSX code that renders the blog sidebar.
 */
function BlogSideBar({ blogs }) {
  /**
   * Renders other blog posts.
   * This is an Array of JSX elements representing the other blog posts.
   */
  const renderOtherBlogPosts = () => {
    return blogs?.blogdata?.slice(0, 4).map((post) => {
      const blogDate = new Date(post.post_date).toLocaleDateString("en-US", {
        year: "numeric",
        month: "short",
        day: "numeric",
      });

      const blogImg =
        post.meta_value != null
          ? `${blogs?.image_url}/${post.meta_value}`
          : BlogImg1;

      return (
        <div className="popular-post" key={post.id}>
          <Link to={`/blog/blogdetail/${post?.id}`}>
            <img src={blogImg} alt="blog-img" style={{top: "20px"}} loading="lazy" />
          </Link>
          <h5>
            <Link to={`/blog/blogdetail/${post?.id}`}>{post?.post_title}</Link>
          </h5>
          <span>{blogDate}</span>
        </div>
      );
    });
  };

  return (
    <div className="blog-sidebar">
      <aside className="widget widget-categories">
        {/*<h3 className="widget-title">Categories</h3>*/}
        <ul>
          <li>
            <a href="#">About</a>
            {/*<span>(24)</span>*/}
          </li>
          <li>
            <a href="#">Sign up</a>
            {/*<span>(15)</span>*/}
          </li>
          <li>
            <a href="#">Login</a>
            <span>(8)</span>
          </li>
          <li>
            <a href="https://blog.wrenchboard.com/">More Articles</a>
            {/*<span>(12)</span>*/}
          </li>
        </ul>
      </aside>
      <aside className="widget widget-trend-post">
        <h3 className="widget-title">Other Posts</h3>
        {renderOtherBlogPosts()}
      </aside>
      {/*<aside className="widget">*/}
      {/*    <h3 className="widget-title">Popular Tags</h3>*/}
      {/*    <div className="tags">*/}
      {/*        <a href="#">Bisy LMS</a>*/}
      {/*        <a href="#">Design</a>*/}
      {/*        <a href="#">General</a>*/}
      {/*        <a href="#">Online</a>*/}
      {/*        <a href="#">Prevention</a>*/}
      {/*        <a href="#">Artist</a>*/}
      {/*        <a href="#">Education</a>*/}
      {/*        <a href="#">Motivation</a>*/}
      {/*        <a href="#">Politico</a>*/}
      {/*        <a href="#">Live Cases</a>*/}
      {/*    </div>*/}
      {/*</aside>*/}
    </div>
  );
}

export default BlogSideBar;