import Image from "next/image";
import leftBanner from "./assets/left-banner.jpg";
import ArticleBlock from "@/app/components/ArticleBlock";

export default async function Home() {
  return (
    <main className={"flex justify-between"}>
      <div className={"left-side w-[222px]"}>
        <Image src={leftBanner} alt={"left banner"} />
      </div>
      <div className={"main-content w-[513px]"}>
        <ArticleBlock
          height={218}
          title={"综合新闻"}
          category={"4"}
          linkPrefix={"/general-news"}
        ></ArticleBlock>
        <div className={"flex justify-between mt-1"}>
          <ArticleBlock
            width={250}
            height={218}
            title={"科研进展"}
            category={"5"}
            linkPrefix={"/research-progress"}
          ></ArticleBlock>
          <ArticleBlock
            width={250}
            height={218}
            title={"学术活动"}
            category={"6"}
            linkPrefix={"/academic-events"}
          ></ArticleBlock>
        </div>
        <div className={"flex justify-between mt-1"}>
          <ArticleBlock
            width={250}
            height={218}
            title={"科技成果"}
            category={"7"}
            linkPrefix={"/technological-achievements"}
          ></ArticleBlock>
          <ArticleBlock
            width={250}
            height={218}
            title={"媒体扫描"}
            category={"8"}
            linkPrefix={"/media-scan"}
          ></ArticleBlock>
        </div>
      </div>
      <div className={"right-side w-[225px]"}>
        <ArticleBlock
          linkPrefix={"/announcements"}
          category={"3"}
          height={275}
          title={"公告通知"}
        ></ArticleBlock>
      </div>
    </main>
  );
}