import Image from "next/image";
import trumpetIcon from "@/app/assets/trumpet-icon.png";
import styles from "@/app/assets/page.module.css";
import Link from "next/link";
import request from "@/app/lib/request";
import { listArticles } from "@/app/api/articles";
import dayjs from "dayjs";

interface ArticleLink {
  title: string;
  date?: string;
  href: string;
}

const ArticleBlock = async ({
  title,
  width,
  height,
  category,
  linkPrefix,
  showDate,
}: {
  title: string;
  height?: number | string;
  width?: number | string;
  category: string;
  linkPrefix: string;
  showDate?: boolean;
}) => {
  const data = await listArticles({ cid: category });
  return (
    <div
      style={{
        width,
        height,
      }}
      className={"flex flex-col overflow-hidden"}
    >
      <div
        className={`title-bar text-white flex items-center px-2 font-bold ${styles.articleBlockTitleBar} relative`}
      >
        <Image width={30} height={30} src={trumpetIcon} alt={"trumpet icon"} />
        <span className={"ml-2 text-[14px]"}>{title}</span>
        <Link
          className={"absolute right-3 text-white text-xs"}
          href={`${linkPrefix}/pages/1`}
        >
          更多+
        </Link>
      </div>
      <div className={`${styles.articlesList} bg-[#e1f1fd] flex-1`}>
        <ul>
          {data.lists?.map((article) => (
            <li className={"h-8"} key={article.id}>
              <Link
                className={
                  "w-full px-1 h-full flex items-center text-xs justify-between"
                }
                href={`${linkPrefix}/${article.id}`}
              >
                <span className={"flex-1 truncate"}>{article.title}</span>
                {showDate && (
                  <span>{dayjs(article.createTime).format("YYYY-MM-DD")}</span>
                )}
              </Link>
            </li>
          ))}
        </ul>
      </div>
    </div>
  );
};

export default ArticleBlock;