import type { Metadata } from "next";
import { notFound } from "next/navigation";
import CallToAction from "@/components/common/CallToAction";
import Footer from "@/components/footer/Footer";
import Header from "@/components/header/Header";
import MobileMenu from "@/components/header/MobileMenu";
import ProductSlider from "@/components/shop/product-details/ProductSlider";
import ProductDescriptionTab from "@/components/shop/product-details/ProductDescriptionTab";
import RelatedProduct from "@/components/shop/product-details/RelatedProduct";
import { getProductDetailContentById } from "@/data/product-detail-main";
import { SITE_NAME } from "@/data/site";
import Link from "next/link";

type PageProps = {
  params: Promise<{ productId: string }>;
};

export async function generateMetadata({
  params,
}: PageProps): Promise<Metadata> {
  const { productId } = await params;
  const detail = getProductDetailContentById(productId);
  if (!detail) {
    return {
      title: "Product Details",
      description: `Product details and insights from ${SITE_NAME}.`,
    };
  }
  return {
    title: detail.product.title,
    description: `${detail.product.title} details and insights from ${SITE_NAME}.`,
  };
}

export default async function Page({ params }: PageProps) {
  const { productId } = await params;
  const detail = getProductDetailContentById(productId);
  if (!detail) notFound();

  return (
    <>
      {/* Header start */}
      <Header />
      {/* Header-end */}

      {/* MobileMenu start */}
      <MobileMenu />

      {/* main-sec3 */}
      <section className="main-sec3">
        {/* page-banner3 */}
        <div className="page-banner3">
          <div className="carousel-container">
            <div className="page-info">
              <div className="page-content3">
                <h1
                  className="title"
                  data-aos="fade-up"
                  data-aos-duration={900}
                  data-aos-delay={300}
                >
                  Product Details
                </h1>
                <ul
                  className="bread-crumbs mb-0"
                  data-aos="fade-up"
                  data-aos-duration={900}
                  data-aos-delay={400}
                >
                  <li>
                    <Link href="/shop" title="">
                      Shop
                    </Link>
                  </li>
                  <li className="dot" />
                  <li>{detail.product.title}</li>
                </ul>
              </div>
            </div>
          </div>
        </div>
        {/* End page-banner3 */}
      </section>
      {/* End main-sec3 */}

      {/* product-detail */}
      <section className="product-detail space-top">
        <div className="carousel-container">
          <div className="row">
            <ProductSlider detail={detail} />
          </div>
          <div
            className="detail-tabs"
            data-aos="fade-up"
            data-aos-duration={900}
            data-aos-delay={300}
          >
            <ProductDescriptionTab />
          </div>
        </div>
      </section>
      {/* End product-detail */}
      {/* shop-sec2 */}
      <section className="shop-sec2 space">
        <div className="carousel-container">
          <div className="shop-title">
            <h2 className="title">Related Projects</h2>
          </div>
          <RelatedProduct />
        </div>
      </section>
      {/* End shop-sec2 */}

      {/* CallToAction area start */}
      <CallToAction />
      {/* CallToAction area start */}

      {/* Footer area start */}
      <Footer />
      {/* Footer area start */}
    </>
  );
}