import type { Metadata } from "next";
import ProductDetailComponent from "@/components/page/ProductDetail";
import { Suspense } from "react";
import info from '@/public/json/product-detail.json';

type Params = { slug: string };

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

  let product: any = null;
  for (const value of info.data.data) {
    if (slug === value.slug.id || slug === value.slug.cn) {
      product = value;
    }
  }

  return {
    title: `Lingkaran Dua | ${product.name.id}`,
    description: `Detail produk ${product.name.id} dari Lingkaran Dua`,
    keywords: `Lingkaran Dua, Produk, ${product.name.id}`,
    robots: {
      index: true,
      follow: true,
      nocache: true,
      googleBot: {
        index: true,
        follow: true
      }
    }
  };
}

export default async function ProductDetailPage(
  props: { params: Promise<Params> }
) {
  const { slug } = await props.params;

  let product: any = null;
  for (const value of info.data.data) {
    if (slug === value.slug.id || slug === value.slug.cn) {
      product = value;
    }
  }

  return (
    <Suspense fallback={<div>Loading...</div>}>
      <ProductDetailComponent slug={slug} product={product} />
    </Suspense>
  );
}