import BlogSidebar from "@/src/components/BlogSidebar";
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?.metatitle}
        description={post?.metaDisc}
      />

      <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-4 col-md-12 mb-4 order-lg-1 order-2">
                <BlogSidebar currentSlug={post?.slug} />
              </div>

              <div className="col-lg-8 col-md-12 order-lg-2 order-1">
                <div className="blog-single-items">
                  <div className="blog-thumb">
                    <img
                      src={post?.big_image}
                      alt={post?.title || "Blog Image"}
                      className="img-fluid"
                    />
                  </div>
                  <div className="blog-content">
                    <div className="blog-content-text text-left">
                      <h5>{post?.title}</h5>
                      <div className="blog-meta mb-3">
                        <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>

            </div>
          </div>
        </div>
      </Layout>
    </>
  );
};

export default BlogDetails;

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

  return {
    paths,
    fallback: false,
  };
}

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

  return {
    props: { post },
  };
}