import { IBlogDetails } from "@/models/Blog";
import React from "react";
import BlogSidebar from "./BlogSidebar";

const BlogDetailsContent = ({ BlogDetails }: { BlogDetails: IBlogDetails }) => {
  
  const content = BlogDetails?.post_body || "";

  // More robust heading modification
  const modifyHeadingsForIds = (content: string) => {
    // Handle cases where headings might have attributes or nested spans
    return content.replace(
      /<h([1-3])([^>]*)>(.*?)<\/h\1>/gi,
      (match, level, attrs, headingText) => {
        // Extract text content by removing HTML tags inside headings
        const textOnly = headingText.replace(/<[^>]*>/g, '');
        const id = textOnly
          .replace(/[^\w\s-]/g, '')
          .replace(/\s+/g, '-') 
          .toLowerCase();
        return `<h${level}${attrs} id="${id}">${headingText}</h${level}>`;
      }
    );
  };

  const modifiedContent = modifyHeadingsForIds(content);

  return (
    <section className="flex max-lg:flex-col-reverse  lg:items-start gap-20 ">
      <BlogSidebar content={modifiedContent} />
      <div className="flex flex-col gap-8 sm:max-w-3xl ">
        
        <div
          className="postBody"
          dangerouslySetInnerHTML={{ __html: modifiedContent }}
        />
      </div>
    </section>
  );
};

export default BlogDetailsContent;