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

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

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

    if (!blog) {
    return {
      title: "Blog Not Found",
      description: "The blog you are looking for does not exist.",
    };
  }

  return {
    title: blog.metatitle,
    description: blog.metadesc,
  };

}

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

  if (!blog) return notFound();

  return (
    <Layout
      headerStyle={2}
      footerStyle={2}
      breadcrumbTitle={blog.title}
      bgImage={blog.banner}
    >
      <div className="sidebar-page-container">
        <div className="auto-container">
          <div className="row clearfix">
            {/* Content Side */}
            <div className="content-side col-lg-12 col-md-12 col-sm-12">
              <div className="blog-detail">
                <div className="inner-box">
                  <div className="image">
                    <img src={blog.detailImage} alt={blog.title} style={{ height: "600px", width: "100%", objectFit: "cover" }}/>
                  </div>

                  <div className="lower-content">
                    <div dangerouslySetInnerHTML={{ __html: blog.content }} />
                  </div>
                </div>
              </div>

              {blog.faqs && blog.faqs.length > 0 && (
                <FAQAccordion faqs={blog.faqs} className="mt-5" />
              )}

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