import { BeforeFooterBlock } from "@/components/Blocks/BeforeFooter";
import BlogDetail, { BlogDetailContentSkeleton } from "@/components/Blogs/BlogDetail";
import { fetchBlogDetail } from "@/services/payload/blog";
import { Metadata } from "next";
import Image from "next/image";
import { Suspense } from "react";

export async function generateMetadata({ params }: { params: Promise<{ slug: string }> }): Promise<Metadata> {
  const name = "Cochise Oncology";
  const slug = (await params).slug;
  const blog = await fetchBlogDetail(slug);

  if (!blog) {
    return {
      title: name,
      description: name,
      openGraph: {
        title: name,
        description: name,
      },
    };
  }

  const title = `${!!blog.data?.meta?.title ? blog.data?.meta?.title : blog.data.title} - ${name}`;
  const description = `${!!blog.data?.meta?.description ? blog.data?.meta?.description : blog.data.title} - ${name}`;

  return {
    title: title,
    description: description,
    openGraph: {
      title: title,
      description: description,
      images: [{ url: blog.imgUrl }],
    },
  };
}

export default async function SingleBlogPage({ params }: { params: Promise<{ slug: string }> }) {
  const slug = (await params).slug;

  return (
    <>
      <Suspense fallback={<Loading />}>
        <BlogDetail slug={slug} />
        <BeforeFooterBlock />
      </Suspense>
    </>
  );
}

function Loading() {
  return (
    <>
      <section className="page-section bg-dark-1 bg-gradient-gray-dark-1 light-content bg-scroll overflow-hidden">
        {/* <!-- Background Shape --> */}
        <div className="bg-shape-1 opacity-003">
          <Image src="/assets/images/demo-fancy/bg-shape-1.svg" width={1443} height={844} alt="" />
        </div>
        {/* <!-- End Background Shape --> */}
      </section>

      {/* Section */}
      <BlogDetailContentSkeleton />
      {/* End Section */}
    </>
  );
}