import singlePost from "../../assets/images/single-post/1.jpg";
import { BlogLoader, ImageLoader } from "../../lib/SkeletonLoaders";
import Image from "next/image";
// import LazyImage from "../../lib/LazyImage";

/**
 * Renders a blog post component.
 * @returns {JSX.Element} The rendered blog post component.
 */
function Blog({ blogItem, imgUrl, loader }) {
  // Generate a unique ID
  const uniqueId = `element_${Math.random().toString(36).substr(2, 9)}`;

  const blogImg = `${imgUrl}/${blogItem?.meta_value || singlePost}`;

  const imgLoaderStyles = {
    "--loader-width": "750px",
    "--loader-height": "550px",
  };

  const headerLoaderStyles = {
    "--text-container-width": "300px",
    "--text-container-height": "18px",
  };

  const bodyTextLoaderStyles = {
    "--text-container-width": "770px",
    "--text-container-height": "15px",
  };

  return (
    <>
      <div className="single-post-area">
        <div className="post-thumb" style={{ marginTop: "0" }}>
          {loader ? (
            <div style={imgLoaderStyles}>
              <ImageLoader />
            </div>
          ) : (
            <img src={blogImg} alt={blogItem?.meta_value || "single-post.jpg"} key={uniqueId} />
          )}
        </div>
        {loader ? (
          <div style={headerLoaderStyles}>
            <BlogLoader />
          </div>
        ) : (
          <h4 className="article-title">{blogItem?.post_title}</h4>
        )}
        {loader ? (
          <div style={bodyTextLoaderStyles}>
            <BlogLoader />
          </div>
        ) : (
          <div
            dangerouslySetInnerHTML={{ __html: blogItem?.post_content }}
          ></div>
        )}
      </div>
    </>
  );
}

export default Blog;