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

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, index) => {
              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>
    </>
  );
}
