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";

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

const ArticleBlock = async ({
  title,
  width,
  height,
  category,
  linkPrefix,
}: {
  title: string;
  height?: number | string;
  width?: number | string;
  category: string;
  linkPrefix: string;
}) => {
  const data = await listArticles({ cid: category });
  return (
    <div
      style={{
        width,
        height,
      }}
      className={"flex flex-col"}
    >
      <div
        className={`title-bar flex items-center px-2 ${styles.articleBlockTitleBar}`}
      >
        <Image width={30} height={30} src={trumpetIcon} alt={"trumpet icon"} />
        <span className={"ml-2 text-[14px]"}>{title}</span>
      </div>
      <div className={`${styles.articlesList} bg-[#e1f1fd] flex-1`}>
        <ul>
          {data.lists.map((article) => (
            <li className={"h-7 px-1 flex items-center"} key={article.id}>
              <Link
                className={"w-full truncate text-xs"}
                href={`${linkPrefix}/${article.id}`}
              >
                {article.title}
              </Link>
            </li>
          ))}
        </ul>
      </div>
    </div>
  );
};

export default ArticleBlock;
