import EssayTitleView from "@/app/[language]/forum/components/EssayTitleView";
import useGetLatestEssay from "@/app/[language]/query/useGetLatestEssay";
import { useTranslations } from "next-intl";
import { ListGroup, ListGroupItemHeading } from "reactstrap";

export default function LatestEssaysView() {
  const t = useTranslations();

  const { data: latestEssay, isFetched: isLatestEssayLoaded } =
    useGetLatestEssay();

  return (
    <>
      <ListGroup>
        <ListGroupItemHeading>{t("latestEssaysView")}</ListGroupItemHeading>
        {isLatestEssayLoaded
          ? latestEssay.map((latestEssay) => (
              <EssayTitleView
                key={latestEssay.essayID}
                forumID={latestEssay.forumID}
                forumTitle={latestEssay.forumTitle}
                essay={latestEssay}
              />
            ))
          : [...Array(5).keys()].map((i) => (
              <EssayTitleView
                key={i}
                essay={{
                  essayID: 0,
                  title: "Loading...",
                  avatarID: "",
                  avatarName: "",
                  date: "",
                  commentCount: 0,
                  hitCount: 0,
                }}
              />
            ))}
      </ListGroup>
    </>
  );
}