// app/blog/[slug]/page.js
import PageBanner from "@/components/PageBanner";
import WellFoodLayout from "@/layout/WellFoodLayout";
import { Blog } from "@/utility/constant.utils";

export async function generateMetadata({ params }) {
  const blog = Blog.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.metadescription,
  };
}

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

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

  if (!blog) {
    return <div>Blog post not found</div>;
  }

  return (
    <WellFoodLayout>
      <PageBanner
        pageTitle={"Blog Details"}
        background="/assets/images/inner-banner/2.webp"
      />
      <section className="blog-details-area py-80 rpy-60">
        <div className="container container-1290">
          <div className="row">
            <div className="col-lg-12">
              <div className="blog-details-wrap">
                <div className="blog-item style-two">
                  <div
                    className="image"
                    data-aos="fade-up"
                    data-aos-duration={1500}
                    data-aos-offset={50}
                  >
                    <img
                      src={blog.bigImage}
                      alt={blog.title}
                      loading="lazy"
                    />
                  </div>
                  <div
                    className="content"
                    data-aos="fade-up"
                    data-aos-duration={1500}
                    data-aos-offset={50}
                  >
                    <ul className="blog-meta-two">
                      <li>{blog.user}</li>
                      <li>{blog.date}</li>
                    </ul>
                    <h3>{blog.title}</h3>
                    <div
                      dangerouslySetInnerHTML={{ __html: blog.description }}
                    />
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
    </WellFoodLayout>
  );
}