import { notFound } from "next/navigation";

import ProductAddOnsPage from "@/components/products/ProductAddOnsPage";
import ProductNavbar from "@/components/products/ProductNavbar";
import { getProduct, getProductPageCopy } from "@/data/products.data";
import { getDictionary } from "@/lib/i18n";
import { locales, type Locale } from "@/lib/locales";
import type { ProductSlug } from "@/lib/routes";

const productSlugs = ["pureestate", "buildpro", "societypro"] as const;

type PageProps = {
  params: Promise<{
    lang: Locale;
    slug: ProductSlug;
  }>;
};

export function generateStaticParams() {
  return locales.flatMap((lang) =>
    productSlugs.map((slug) => ({
      lang,
      slug,
    })),
  );
}

export default async function AddOnsPage({ params }: PageProps) {
  const { lang, slug } = await params;

  if (!locales.includes(lang) || !productSlugs.includes(slug as ProductSlug)) {
    notFound();
  }

  const dictionary = await getDictionary(lang);
  const product = getProduct(dictionary, slug, lang);
  if (!product) notFound();

  const copy = getProductPageCopy(lang);
  const productHref = `/${lang}/products/${slug}`;

  return (
    <>
      <ProductNavbar
        bookDemoLabel={dictionary.common.bookDemo}
        copy={copy}
        currentPath={`${productHref}/add-ons`}
        locale={lang}
        product={product}
      />
      <ProductAddOnsPage
        locale={lang}
        productSlug={slug}
        productHref={productHref}
        registerHref={`${productHref}/register`}
      />
    </>
  );
}