import BlogDetails from "@/components/BlogDetails";
import Breadcrumb from "@/components/Breadcrumb";
import FooterAreaOne from "@/components/FooterAreaOne";
import HeaderFour from "@/components/HeaderFour";
import SubscribeOne from "@/components/SubscribeOne";
import Preloader from "@/helper/Preloader";
import { blogPosts } from "../../../../utils/constant.utils";

// Define the static parameters for your blog posts
export async function generateStaticParams() {
    const blogIds = blogPosts.map((post) => post.id.toString()); // Use the ids of your blog posts

    return blogIds.map((id) => ({
        blogId: id, // The dynamic parameter in the URL
    }));
}

export const metadata = {
    title: "Blog Details || Sri Murugan Temple, Waterloo ",
    description:
        "At Sri Murugan Temple, our journey began with a simple yet profound vision: to create a sacred space where individuals from all walks of life can come together in unity, devotion, and spiritual growth.",
};

const page = ({ params }) => {
    const { blogId } = params;

    const blog = blogPosts.find((post) => post.id === Number(blogId)); // Get single blog post

    if (!blog) {
        return <p>Blog not found!</p>; // Handle invalid blog ID
    }

    return (
        <>
            {/* Preloader */}
            {/* <Preloader /> */}
            {/* Header one */}
            <HeaderFour />

            {/* Breadcrumb */}
            <Breadcrumb title={"Blog Details"} background="/assets/img/inner-banner/14.jpg" />

            {/* Blog Details */}
            <BlogDetails blog={blog} />

            {/* Subscribe One */}
            {/* <SubscribeOne /> */}

            {/* Footer Area One */}
            <FooterAreaOne />
        </>
    );
};

export default page;
