uldp.edu.vn/app/blog/category/[slug]/page.tsx

import Breadcrumb from "@/app/components/Breadcrumb";
import NewsSection from "@/app/blog/components/NewsSection";
import Sidebar from "@/app/blog/components/Sidebar";
import { fetchBlogsByCategory, fetchCategoryDetail } from "@/api/blogsApi";

interface CategoryPageProps {
    params:
        | Promise<{
              slug: string;
          }>
        | {
              slug: string;
          };
    searchParams?: Promise<{ search?: string; page?: string }> | { search?: string; page?: string };
}

export default async function CategoryPage({ params, searchParams }: CategoryPageProps) {
    // Handle both Promise and direct object
    const resolvedParams = params instanceof Promise ? await params : params;
    const slug = resolvedParams.slug;
    const resolvedSearchParams = searchParams instanceof Promise ? await searchParams : searchParams;
    const searchQuery = resolvedSearchParams?.search?.toString() || "";
    const pageParam = resolvedSearchParams?.page?.toString() || "1";
    const currentPage = Number.parseInt(pageParam, 10) || 1;

    // Fetch category detail and blogs
    let categoryResponse, blogsResponse;
    try {
        [categoryResponse, blogsResponse] = await Promise.all([
            fetchCategoryDetail(slug),
            fetchBlogsByCategory(slug, {
                page: currentPage,
                limit: 3,
                ...(searchQuery ? { search: searchQuery } : {}),
            }),
        ]);
    } catch {
        return (
            <>
                <Breadcrumb title="Category" current="Blog Category" />
                <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>Category not found</h2>
                                        <p>The category you are looking for does not exist.</p>
                                    </div>
                                </div>
                                <Sidebar />
                            </div>
                        </div>
                    </div>
                </section>
            </>
        );
    }

    const category = categoryResponse.data;
    const { blogs, pagination } = blogsResponse.data;

    return (
        <>
            <Breadcrumb title={category.name} current="Blog Category" />
            <NewsSection blogs={blogs} categorySlug={slug} searchQuery={searchQuery} pagination={pagination} />
        </>
    );
}