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

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 Standard" 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>
  );
}