import Layout from "@/components/layout/Layout";
import Link from "next/link";
import Blogs from "@/utils/Blog.utils";
import { notFound } from "next/navigation";

export async function generateStaticParams() {
  return Blogs.map((item) => ({
    slug: item.slug,
  }));
}

export default function BlogDetails({ params }) {
  const blog = Blogs.find((item) => item.slug === params.slug);

  if (!blog) return notFound();

  return (
    <Layout headerStyle={2} footerStyle={1} breadcrumbTitle="Blog Details">
      <section className="sidebar-page-container sec-pad-2">
        <div className="auto-container">
          <div className="row clearfix">
            <div className="col-lg-12 col-md-12 col-sm-12 content-side">
              <div className="blog-details-content">
                <div className="news-block-one">
                  <div className="inner-box">
                    <figure className="image-box">
                      <img
                        src={blog.banner}
                        alt={blog.title}
                        style={{ width: "100%", height: "auto" }}
                      />
                    </figure>
                    <div className="lower-content">
                      {/* <ul className="post-info mb_15 clearfix">
                        <li><Link href="#">{blog.author}</Link></li>
                        <li>{blog.date}</li>
                        <li>{blog.comments}</li>
                      </ul> */}
                      <h2>{blog.title}</h2>
                      <div dangerouslySetInnerHTML={{ __html: blog.content }} />
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
    </Layout>
  );
}