import BlogSidebar from "@/src/components/BlogSidebar";
import Breadcumb from "@/src/components/Breadcumb";
import BlogBanner from "@/src/components/services-details-banner/blogbanner";
import ConsenHead from "@/src/ConsenHead";
import Layout from "@/src/layout/Layout";
import { BlogData } from "@/utils/constant.utils";

const BlogDetails = ({ post }) => {
  if (!post) return <p>Blog not found</p>;

  return (
    <>
      <ConsenHead
        title={post?.seoTitle || post?.title}
        description={post?.seoDesc || post?.description}
      />

      <Layout>
        <BlogBanner pageName={post?.hTittle} />

        <div className="blog-section style-two details">
          <div className="container">
            <div className="row justify-content-center">
              <div className="col-lg-12">
                <div className="blog-single-items">
                  <div className="blog-thumb">
                    <img src={post?.big_image} alt="Blog img" />
                  </div>
                  <div className="blog-content">
                    <div className="blog-content-text text-left">
                      <h5>{post?.title}</h5>
                      <div className="blog-meta">
                        <span><a href="#">{post?.user}</a></span> -{" "}
                        <span>{post?.date}</span> -{" "}
                        <span><a href="#">{post?.category}</a></span>
                      </div>
                      <div
                        dangerouslySetInnerHTML={{ __html: post?.description }}
                      ></div>
                    </div>
                  </div>
                </div>
              </div>
              {/* Optional Sidebar: <BlogSidebar /> */}
            </div>
          </div>
        </div>
      </Layout>
    </>
  );
};

export default BlogDetails;

export async function getStaticPaths() {
  const paths = BlogData.map((blog) => ({
    params: { slug: blog.slug },
  }));

  return {
    paths,
    fallback: false, // Use true/‘blocking’ if content is dynamic
  };
}

export async function getStaticProps({ params }) {
  const post = BlogData.find((b) => b.slug === params.slug) || null;

  return {
    props: { post },
  };
}