import Footer1 from "@/components/footers/Footer1";
import Header1 from "@/components/headers/Header1";
import ProductDetails from "@/components/homes/home-1/Products/product-details";
import { allProducts } from "@/utlis/constant.utils";
import Link from "next/link";
import { notFound } from "next/navigation";

export const metadata = {
  title: "Product Details || Xbuild - Construction Next.js Template",
  description: "Xbuild - Construction Next.js Template",
};

export async function generateStaticParams() {
  return allProducts.map((item) => ({ slug: item.slug }));
}

export default function Page({ params }) {
  const productItem = allProducts.find((item) => item.slug === params.slug);

  if (!productItem) {
    notFound();
  }

  return (
    <>
      <Header1 />
      <div
        className="breadcrumb-wrapper bg-cover"
        style={{ backgroundImage: `url(${productItem.bannerImage})` }} 
      >
        <div className="container">
          <div className="breadcrumb-wrapper-items">
            <div className="page-heading">
              <div className="breadcrumb-sub-title">
                <h1 className="wow fadeInUp" data-wow-delay=".3s">
                  {productItem.title}
                </h1>
              </div>
              <ul className="breadcrumb-items wow fadeInUp" data-wow-delay=".5s">
                <li><Link href="/">Home</Link></li>
                <li><i className="fa-sharp fa-solid fa-slash-forward" /></li>
                <li>{productItem.title}</li>
              </ul>
            </div>
            <div className="breadcrumb-image" />
          </div>
        </div>
      </div>

      <ProductDetails productItem={productItem} />

      <Footer1 />
    </>
  );
}