import { notFound } from "next/navigation";
import Link from "next/link";
import Image from "next/image";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import "@fortawesome/fontawesome-svg-core/styles.css";
import { faPhoneVolume } from "@fortawesome/free-solid-svg-icons";
import { getPublishedBlogBySlug } from "../../lib/blogs";

export const dynamic = "force-dynamic";

export async function generateMetadata({ params }) {
  const { slug } = await params;
  const blog = await getPublishedBlogBySlug(slug);

  if (!blog) {
    return {};
  }

  return {
    title: blog.metaTitle || blog.title,
    description: blog.metaDescription || blog.excerpt,
    keywords: blog.metaKeywords || undefined,
    alternates: {
      canonical: `/${blog.slug}`,
    },
    openGraph: {
      title: blog.metaTitle || blog.title,
      description: blog.metaDescription || blog.excerpt,
      type: "article",
      url: `/${blog.slug}`,
      images: blog.featuredImageUrl
        ? [
            {
              url: blog.featuredImageUrl,
              alt: blog.imageAlt || blog.title,
            },
          ]
        : [],
    },
    twitter: {
      card: "summary_large_image",
      title: blog.metaTitle || blog.title,
      description: blog.metaDescription || blog.excerpt,
      images: blog.featuredImageUrl ? [blog.featuredImageUrl] : [],
    },
  };
}

export default async function BlogDetailPage({ params }) {
  const { slug } = await params;
  const blog = await getPublishedBlogBySlug(slug);

  if (!blog) {
    notFound();
  }

  return (
    <main>
      <section className="main-banner">
        <div className="container">
          <div className="row align-items-center justify-content-center">
            <div className="col-xl-8 col-lg-8 col-md-8 col-sm-12 col-12">
              <div className="banner-content text-center">
                <h1 data-aos="fade-down">{blog.title}</h1>
                <div
                  className="banner-btns justify-content-center"
                  data-aos="zoom-in"
                  data-aos-delay="300"
                >
                  <Link href="/contact-us">Contact Us</Link>
                  <a href="tel:+1 (323) 503-1458 ">
                    <FontAwesomeIcon icon={faPhoneVolume} /> +1 (323) 503-1458
                  </a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      <section className="blog-detail-sec">
        <div className="container">
          <div className="row justify-content-center">
            <div className="col-xl-8 col-lg-8 col-md-8 col-sm-12 col-12">
              <div className="blog-content">
                {blog.featuredImageUrl ? (
                  <div className="row justify-content-center">
                    <div className="col-lg-8">
                      <div className="blog-imgg">
                        <Image
                          src={blog.featuredImageUrl}
                          alt={blog.imageAlt}
                          title={blog.imageTitle}
                          width={1200}
                          height={675}
                          unoptimized
                          className="img-fluid blog-featured-img"
                          style={{ width: "100%", height: "auto" }}
                        />
                      </div>
                    </div>
                  </div>
                ) : null}

                <h2 data-aos="fade-up">{blog.contentHeading || blog.title}</h2>
                <div dangerouslySetInnerHTML={{ __html: blog.contentHtml }} />
              </div>
            </div>
          </div>
        </div>
      </section>
    </main>
  );
}
