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 async function generateMetadata({ params }) {
  const blog = Blogs.find((item) => item.slug === params.slug);

  if (!blog) {
    return {};
  }

  return {
    title: blog.meta?.title || blog.title,
    description: blog.meta?.description || blog.shortDesc,
  };
}

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

  if (!blog) return notFound();

  const sameCategoryBlogs = Blogs.filter(
    (item) => item.category === blog.category && item.slug !== blog.slug
  );

  const relatedBlogs = sameCategoryBlogs.length > 0 ? [sameCategoryBlogs[0]] : [];


  return (
    <Layout
      headerStyle={2}
      footerStyle={1}
      breadcrumbTitle={blog.title}
      bannerImage={blog.bannerImage}
    >
      <section className="service-details pt_90 pb_90">
        <div className="auto-container">
          <div className="row clearfix">
            {/* Sidebar */}
            <div className="col-lg-4 col-md-12 col-sm-12 sidebar-side">
              <div className="default-sidebar service-sidebar mr_15">
                <div className="sidebar-widget category-widget">
                  <div className="widget-title">
                    <h3>Blogs</h3>
                  </div>
                  <div className="widget-content">
                    <ul className="category-list clearfix">
                      {Blogs.map((b) => (
                        <li key={b.id}>
                          <Link
                            href={`/blog/${b.slug}`}
                            className={b.slug === blog.slug ? "current" : ""}
                          >
                            {b.title}
                          </Link>
                        </li>
                      ))}
                    </ul>
                  </div>
                </div>

                {relatedBlogs.length > 0 && (
                  <div className="sidebar-widget related-post">
                    <div className="widget-title">
                      <h3>Related Blog</h3>
                    </div>
                    <div className="post-inner">
                      {relatedBlogs.map((related) => (
                        <div className="service-block-one" key={related.id}>
                          <div className="inner-box">
                            <div className="image-box">
                              <figure className="image">
                                <img
                                  src={related.thumbnail}
                                  alt={related.title}
                                />
                              </figure>
                            </div>
                            <div className="lower-content2">
                              <h3>
                                <Link href={`/blog/${related.slug}`}>
                                  {related.title}
                                </Link>
                              </h3>
                              <p>{related.shortDesc}</p>
                              <Link
                                href={`/blog/${related.slug}`}
                                className="read-more"
                              >
                                Read More
                              </Link>
                            </div>
                          </div>
                        </div>
                      ))}
                    </div>
                  </div>
                )}
              </div>
            </div>

            {/* Blog Content */}
            <div className="col-lg-8 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.bigImage}
                        alt={blog.title}
                        style={{ width: "100%", height: "auto" }}
                      />
                    </figure>
                    <div className="lower-content">
                      <h2>{blog.title}</h2>
                      <div dangerouslySetInnerHTML={{ __html: blog.content }} />
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
    </Layout>
  );
}