import React from "react";
import Nav from "@/components/Nav";
import Footer from "@/components/Footer";
import styles from "./articleDetail.module.scss";
import { fetchArticleDetail } from "@/lib/cms";
import { getDesc180 } from "@/lib/parser";

export async function generateMetadata({ params }: { params: Promise<{ slug: string }> }) {
  const slug = (await params).slug;
  const articleId = slug.replace(".html", "");
  const { data: info } = await fetchArticleDetail(parseInt(articleId as string));
  const title = info?.title;
  const content = info?.content;
  const description = getDesc180(content);
  return {
    title: title,
    description: description,
    keywords: [],
  };
}

export default async function ArticleDetail({ params }: { params: { slug: string } }) {
  const articleId = params.slug.replace(".html", "");
  const { data: info } = await fetchArticleDetail(parseInt(articleId as string));

  const getTitle = () => {
    if (info?.type == 1) {
      return "经典案例";
    } else if (info?.type == 2) {
      return "行业咨询";
    } else if (info?.type == 3) {
      return "服务产品";
    } else {
      return "文章列表";
    }
  };

  return (
    <>
      <div className={styles.container}>
        <Nav title={getTitle()} />
        <div className={styles.content}>
          <div>
            <span className={styles["breadcrumb-item"]}>
              <a href="/home">首页</a>
            </span>
            <span className={styles["breadcrumb-seperator"]}>/</span>
            <span className={styles["breadcrumb-item"]}>
              <a href="/caseList">{getTitle()}</a>
            </span>
            <span className={styles["breadcrumb-seperator"]}>/</span>
            <span className={styles["breadcrumb-item"]}>
              <span className={styles["breadcrumb-last"]}>{info?.title}</span>
            </span>
          </div>
          <div className={styles.title}>{info?.title}</div>
          <div className={styles.author}>
            {info?.author} {info?.createTime}
          </div>
          <div className={styles.line}></div>
          {info?.content && (
            <div className={styles.articleContent} dangerouslySetInnerHTML={{ __html: info?.content }}></div>
          )}
        </div>
        <Footer />
      </div>
    </>
  );
}
