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: Promise<{
        slug: string;
    }> | {
        slug: string;
    };
}

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={post.title} current="Blog Details" />
            <NewsDetailsSection post={post} />
        </>
    );
}