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/blog";

interface CategoryPageProps {
    params: Promise<{
        slug: string;
    }> | {
        slug: string;
    };
}

export default async function CategoryPage({ params }: CategoryPageProps) {
    // Handle both Promise and direct object
    const resolvedParams = params instanceof Promise ? await params : params;
    const slug = resolvedParams.slug;

    // Fetch category detail and blogs
    let categoryResponse, blogsResponse;
    try {
        [categoryResponse, blogsResponse] = await Promise.all([
            fetchCategoryDetail(slug),
            fetchBlogsByCategory(slug, { page: 1, limit: 10 }),
        ]);
    } 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 = blogsResponse.data.blogs;

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