import React from "react";
import { listArticles } from "@/app/_services/articles";
import styles from "./ArticleList.module.scss";
import Link from "next/link";
import Pagination from "@/app/_components/Pagination";
import dayjs from "dayjs";

const ArticleList = async ({
  cid,
  pageNo,
  title,
}: {
  title: string;
  cid: string;
  pageNo: number;
}) => {
  const data = await listArticles({
    pageNo,
    cid,
    pageSize: 20,
    sort: "new",
  });
  return (
    <>
      <h2 className={"text-sm text-[#0f6fca]"}>{title}</h2>
      <ul className={`${styles.articles} mt-5`}>
        {data.lists.map((article, index) => (
          <li className={`${styles.article}`} key={article.id}>
            <Link
              className={"flex h-8 items-center text-sm text-[#666666]"}
              href={`../${article.id}`}
            >
              <span className={"w-0 flex-1 truncate"}>{article.title}</span>
              <span>{dayjs(article.createTime).format("YYYY-MM-DD")}</span>
            </Link>
          </li>
        ))}
      </ul>
      <Pagination page={pageNo} total={data.count} perPage={20} />
    </>
  );
};

export default ArticleList;