"use client";

import React, { useEffect } from "react";
import "./Blog_inner.css";
import Breadcrumb_comp from "../../common-components/breadcrumb-comp/Breadcrumb_comp";
import Back_text_holder from "../../common-components/back_text_holder/Back_text_holder";
import { useDispatch, useSelector } from "react-redux";
import { getblogById } from "../../../features/blog/Slice";
import { useParams } from "next/navigation";
import parse from "html-react-parser";
import { formatDate } from "../../../utils/common";

function Blog_inner() {
  const params = useParams();
  const id = params.id;

  const blog = useSelector((state) => state.blog.blog);
  const breadcrumbs = [
    { label: "Home", link: "/", isActive: false },
    { label: "Blogs", link: "/blog", isActive: false },
    { label: blog?.name, link: "", isActive: true },
  ];
  const dispatch = useDispatch();
  useEffect(() => {
    dispatch(getblogById(id));
  }, [dispatch, id]);

  return (
    <>
      <section className="Blog_inner">
        <Breadcrumb_comp breadcrumbs={breadcrumbs} />
        <div className="container">
          <div className="Blog_inner_holder">
            <div className="blog-content">
              <div className="float-image">
                <img
                  src={process.env.NEXT_PUBLIC_IMG_URL + blog?.image}
                  alt="Blog_inner_img"
                  className="Blog_inner_img"
                />
              </div>

              <div className="content_div">
                <div className="text_holder">
                  <h4 className="heading_text">{blog?.name}</h4>
                  <span className="date_text para_text">
                    {formatDate(blog?.updatedAt)}
                  </span>
                </div>

                <div className="text_holder">
                  <img
                    src={process.env.NEXT_PUBLIC_IMG_URL + blog?.image}
                    alt="Blog_inner_img"
                    className="Blog_inner_img float-img"
                  />

                  <p>{blog?.subname}</p>

                  <div className="para_text">
                    {parse(
                      typeof blog?.description === "string"
                        ? blog.description
                        : "",
                    )}
                  </div>
                </div>
              </div>
            </div>
            <Back_text_holder baseLink="/blog" backText="Blog" />
          </div>
        </div>
      </section>
    </>
  );
}

export default Blog_inner;
