import type { Metadata } from "next";
import ArticleDetailComponent from "@/components/page/ArticleDetail";
import { Suspense } from "react";
import info from '@/public/json/article-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 article: any = null;
  for (const value of info.data.data) {
    if (slugDecoded === value.slug.id || slugDecoded === value.slug.cn) {
      article = value;
    }
  }

  return {
    title: lang === 'id' ? `Lingkaran Dua | ${article.title.id}` : `双环 | ${article.title.cn}`,
    description: lang === 'id' ? `Lingkaran Dua, ${article.title.id}` : `双环, ${article.title.cn}`,
    keywords: lang === 'id' ? `Lingkaran Dua, ${article.title.id}` : `双环, ${article.title.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 article: any = null;
  for (const value of info.data.data) {
    if (slugDecoded === value.slug.id || slugDecoded === value.slug.cn) {
      article = value;
    }
  }

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