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 = { lang: string, slug: string };

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

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

  return {
    title: lang === 'id' ? `Lingkaran Dua | ${product.name.id}` : `双环 | ${product.name.cn}`,
    description: lang === 'id' ? `Lingkaran Dua, ${product.name.id}` : `双环, ${product.name.cn}`,
    keywords: lang === 'id' ? `Lingkaran Dua, ${product.name.id}` : `双环, ${product.name.cn}`,
    robots: {
      index: true,
      follow: true,
      nocache: true,
      googleBot: {
        index: true,
        follow: false,
      },
    },
  };
}

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

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

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