"use client";
import styles from "@/app/assets/page.module.css";
import Image from "next/image";
import trumpetIcon from "@/app/assets/trumpet-icon.png";
import { articleDetail, listArticles } from "@/app/api/articles";
import { htmlToText } from "html-to-text";
import Link from "next/link";

const BranchLifeSketch = async () => {
  const { lists } = await listArticles({ cid: "13" });
  return (
    <div>
      <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]"}>分院生活剪影</span>
      </div>
      <div className={"h-[216px] bg-[#e1f1fd]"}>
        {/*@ts-ignore*/}
        <swiper-container
          style={{
            height: "100%",
          }}
          autoplay
          autoplay-pause-on-mouse-enter={true}
          loop
          slides-per-view="2"
          direction={"vertical"}
        >
          {lists?.map(async (article) => {
            const articleInfo = await articleDetail({
              id: `${article.id}`,
            });
            const articleText = htmlToText(articleInfo.content, {
              selectors: [
                {
                  selector: "img",
                  format: "skip",
                },
              ],
            });
            return (
              // @ts-ignore
              <swiper-slide key={article.id}>
                <div className={"w-full h-[108px] px-2 py-4 flex"}>
                  <Link
                    className={"aspect-square"}
                    href={`/branch-life-sketch/${article.id}`}
                  >
                    <img
                      alt={article.title}
                      className={"w-full h-full"}
                      src={article.image.replace(
                        "http://101.34.131.16:8084/api/uploads/",
                        "",
                      )}
                    />
                  </Link>
                  <div className={"flex-1 w-0 ml-1"}>
                    <Link
                      href={`/branch-life-sketch/${article.id}`}
                      className={"text-xs truncate text-[#144673]"}
                    >
                      {article.title}
                    </Link>
                    <div className={"text-xs text-[#797979] line-clamp-4 mt-3"}>
                      {articleText}
                    </div>
                  </div>
                </div>
                {/*@ts-ignore*/}
              </swiper-slide>
            );
          })}
          {/*@ts-ignore*/}
        </swiper-container>
      </div>
    </div>
  );
};

export default BranchLifeSketch;