import React from "react";
import Image from "next/image";
import Nav from "@/components/Nav";
import Footer from "@/components/Footer";
import styles from "./caseList.module.scss";
import { fetchArticleList } from "@/lib/cms";

interface ArticleType {
  id: number;
  title?: string | null;
  digest?: string | null;
  author?: string | null;
  type?: string | null;
  content?: string | null;
  cover: string;
  payed: boolean;
  order?: number | null;
  status?: string | null;
  createTime?: Date | null;
  updateTime?: Date | null;
}

export default async function CaseList() {
  const { data: list } = await fetchArticleList(1, 1, 100);
  return (
    <>
      <div className={styles.container}>
        <Nav title={"经典案例"} />
        <div className={styles.content}>
          <div className={styles.articleList}>
            {list?.records?.map((item: ArticleType, index: number) => {
              return (
                <a href={`/articleDetail/${item.id}.html`} key={index}>
                  <div className={styles.articleItem}>
                    <Image alt="pic" width={315} height={212} className={styles.articleImg} src={item?.cover} />

                    <div className={styles.articleText}>
                      <div className={styles.articleTitle}>{item?.title}</div>
                      <div className={styles.articleContent}>{item?.digest}</div>
                    </div>
                  </div>
                </a>
              );
            })}
          </div>
        </div>
        <Footer />
      </div>
    </>
  );
}
