next-cochise/src/app/(main)/blog/[slug]/page.tsx

import BlogComments from "@/components/Blogs/BlogComments";
import BlogWidget from "@/components/Blogs/BlogWidget";
import CommentForm from "@/components/CommentForm";
import { fetchBlogDetail } from "@/services/payload/blog";
import { RichText } from "@payloadcms/richtext-lexical/react";
import { Metadata } from "next";
import Image from "next/image";

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

  if (!blog) {
    return {
      title: "Cochise Oncology",
      description: "Cochise Oncology",
      openGraph: {
        title: "Cochise Oncology",
        description: "Cochise Oncology",
        images: [""],
      },
    };
  }

  const title = `${blog.data.title} - Cochise Oncology`;

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

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

  if (!data) return <></>;

  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 --> */}

        <div className="container position-relative pt-sm-40 text-center">
          <div className="row">
            <div className="col-md-10 offset-md-1 col-lg-8 offset-lg-2">
              <h1 className="hs-title-10 mb-10 wow fadeInUp">{data.data.title}</h1>
              {/* Author, Categories, Comments */}
              <div className="blog-item-data mb-0 wow fadeIn" data-wow-delay="0.2s">
                <div className="d-inline-block me-3">
                  <a href="#">
                    <i className="mi-clock size-16" />
                    <span className="visually-hidden">Date:</span> {data.createdAt}
                  </a>
                </div>
                <div className="d-inline-block me-3">
                  <i className="mi-folder size-16" />
                  <span className="visually-hidden">Categories:</span> <a href="#">Design</a>, <a href="#">Branding</a>
                </div>
              </div>
              {/* End Author, Categories, Comments */}
            </div>
          </div>
        </div>
      </section>

      <>
        {/* Section */}
        <section className="page-section">
          <div className="container relative">
            <div className="row">
              {/* Content */}
              <div className="col-md-10 offset-md-1 col-lg-8 offset-lg-2">
                {/* Post */}
                <div className="blog-item mb-80 mb-xs-40">
                  <div className="blog-item-body">
                    <div className="mb-40 mb-xs-30">
                      <Image src={data.imgUrl} alt="Image Description" width={1350} height={759} className="round" />
                    </div>
                    <div>
                      <RichText data={data.data.content} />
                    </div>
                  </div>
                </div>
                {/* End Post */}
              </div>
              {/* End Content */}
            </div>
          </div>
        </section>
        {/* End Section */}
        {/* Divider */}
        <hr className="mt-0 mb-0" />
        {/* End Divider */}
        {/* Section */}
        <section className="page-section">
          <div className="container relative">
            <div className="row mt-n60">
              <BlogWidget
                inputClass="newsletter-field form-control input-md circle mb-10"
                btnClass="btn btn-mod btn-color btn-medium btn-circle btn-hover-anim form-control"
              />
            </div>
          </div>
        </section>
      </>
    </>
  );
}