import { Metadata } from "next";
import { createSeo } from "@/seo/MetaSeo";
import { Suspense } from "react";
import BlogBannerWithPost from "@/components/Blogs/BlogPost";
import Breadcrumbs from "@/components/CommonComponent/BreadCrumbs";
import LiveBooking from "@/components/CommonComponent/LiveBooking";
import { BlogsPageProps } from "@/types/blogs";
import { fetchPageData } from "@/services/api";

export async function generateMetadata(): Promise<Metadata> {
    return createSeo("pages/blogs", "/blogs");
}

export default async function BlogPage() {
    const blogsPagedata = await fetchPageData<BlogsPageProps>("pages/blogs");

    return (
        <>
            <Breadcrumbs items={blogsPagedata?.data?.breadcrumbs} />
            <Suspense fallback={<div className="container py-20 text-center text-[#334D72] text-[18px]">Loading blogs...</div>}>
                <BlogBannerWithPost {...blogsPagedata?.data?.blogs} />
            </Suspense>
            <LiveBooking {...blogsPagedata?.data?.live_booking} />
        </>
    )
}