import useGetLatestEssay from "@/app/[language]/query/useGetLatestEssay";
import EssayTitleView from "@/components/EssayTitleView";
import { useTranslations } from "next-intl";
import ListGroup from "react-bootstrap/ListGroup";
import ListGroupItem from "react-bootstrap/ListGroupItem";
import { getDatetime } from "taehui-lib/date";

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

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

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