import Image from "next/image";
import React from "react";
import { cleanImage } from "../../services/imageHandling";

const BlogsDetailInner = ({ blog }) => {
  let mainBlog;
  if (blog && blog.length > 0) {
    mainBlog = blog[0];
  }
  console.log("mainBlog", blog)
  return (
    <section className="blog-detail-inner-session">
      <div className="container">
        <div className="row align-items-center mb-3">
          <div className="col-6">
            <div className="profile">
              <span className="image-container">
                <Image layout="fill" alt="" className="image img-fluid" src={cleanImage(mainBlog?.attributes?.profilePic?.data?.attributes)} />
              </span>
              <div className="name">{mainBlog?.attributes?.name}</div>
            </div>
          </div>
          <div className="col-6">
            <div className="date">
              <span className="image-container">
                <Image layout="fill" alt="" className="image img-fluid" src="/images/icons/calendar.svg" />
              </span>
              <div className="">{mainBlog?.attributes?.date}</div>
            </div>
          </div>
        </div>
        <div className="row">
          <div className="col-12">
            <ul className="flag-list">
              <li>
                <a href="">{mainBlog?.attributes?.categories}</a>
              </li>
              <li>
                <a href="">Fun</a>
              </li>
              <li>
                <a href="">Lorem Ipsum</a>
              </li>
            </ul>
          </div>
        </div>
        <div className="row">
          <div className="col-12">
            <h2>{mainBlog?.attributes?.title}</h2>
            <div dangerouslySetInnerHTML={{__html: mainBlog?.attributes?.description}}></div>

           
          </div>
        </div>
      </div>
    </section>
  );
};

export default BlogsDetailInner;