import { fetchPageData } from "@/services/api";
import Breadcrumbs from "@/components/CommonComponent/BreadCrumbs";
import BlogDetailsBanner from "@/components/Blogs/BlogDetailsBanner";
import BlogDetailsContent from "@/components/Blogs/BlogDetailsContent";
import BlogDetailsRelated from "@/components/Blogs/BlogDetailsRelated";
import LiveBooking from "@/components/CommonComponent/LiveBooking";
import { BlogDetailData } from "@/types/blog-detail";

interface PageProps {
    params: Promise<{ slug: string }>;
}

export default async function BlogPostPage({ params }: PageProps) {
    const { slug } = await params;

    // Blog detail API returns the object directly (no { data: ... } wrapper)
    // Use ?? fallback to also handle if the backend ever wraps it
    const response = await fetchPageData<any>(`pages/blog/${slug}`);
    const post: BlogDetailData = response?.data?.id ? response.data : response;

    if (!post?.title) {
        return (
            <div className="container py-32 text-center text-[#334D72] text-[18px]">
                Blog post not found.
            </div>
        );
    }

    return (
        <>
            <Breadcrumbs
                items={[
                    { title: "Home", url: "/" },
                    { title: "Blogs", url: "/blogs" },
                    { title: post.title },
                ]}
            />
            <BlogDetailsBanner
                title={post.title}
                banner_image={post.banner_image}
                published_date={post.published_date}
            />
            <BlogDetailsContent post_content={post.post_content} />
            <BlogDetailsRelated recent_posts={post.recent_posts} />
            <LiveBooking {...post.live_booking} />
        </>
    );
}