feat: Refactor blog components and add pagination

app/blog/[slug]/page.tsx

@@ -1,17 +1,72 @@
+import Link from "next/link";
 import Breadcrumb from "@/app/components/Breadcrumb";
 import NewsDetailsSection from "./components/NewsDetailsSection";
+import { fetchBlogList, fetchBlogDetail } from "@/api/blog";
+import Sidebar from "@/app/blog/components/Sidebar";
+
+// Generate static params for all blog posts
+export async function generateStaticParams() {
+    try {
+        const blogResponse = await fetchBlogList({ page: 1, limit: 100 });
+        return blogResponse.data.blogs.map((post) => ({
+            slug: post.slug,
+        }));
+    } catch (error) {
+        console.error("Error generating static params:", error);
+        return [];
+    }
+}
 
 interface BlogDetailsPageProps {
-    params: {
+    params: Promise<{
+        slug: string;
+    }> | {
         slug: string;
     };
 }
 
-export default function BlogDetailsPage(_props: BlogDetailsPageProps) {
+export default async function BlogDetailsPage({ params }: BlogDetailsPageProps) {
+    // Handle both Promise and direct object
+    const resolvedParams = params instanceof Promise ? await params : params;
+    const slug = resolvedParams.slug;
+
+    // Fetch blog detail from API
+    let blogResponse;
+    try {
+        blogResponse = await fetchBlogDetail(slug);
+    } catch {
+        return (
+            <>
+                <Breadcrumb title="Blog Details" current="Blog Details" />
+                <section className="news-standard-section section-padding fix">
+                    <div className="container">
+                        <div className="news-standard-wrapper">
+                            <div className="row g-4">
+                                <div className="col-lg-8 col-12">
+                                    <div className="py-5">
+                            <h2>Post not found</h2>
+                            <p>The blog post you are looking for does not exist.</p>
+                            <Link href="/blog" className="theme-btn mt-3">
+                                Back to Blog <i className="fa-solid fa-arrow-right"></i>
+                            </Link>
+                                    </div>
+                                </div>
+                                {/* Sidebar on the right */}
+                                <Sidebar />
+                        </div>
+                    </div>
+                </div>
+                </section>
+            </>
+        );
+    }
+
+    const post = blogResponse.data;
+
     return (
         <>
-            <Breadcrumb title="Blog Details" current="Blog Details" />
-            <NewsDetailsSection />
+            <Breadcrumb title={post.title} current="Blog Details" />
+            <NewsDetailsSection post={post} />
         </>
     );
 }