import EssayTitleView from "@/app/[language]/forum/components/EssayTitleView";

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

const LatestEssaysView = () => {
  const t = useTranslations();

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

  return (
    <>
      <ListGroup>
        <ListGroupItemHeading>{t("latestEssaysView")}</ListGroupItemHeading>
        {isLatestEssayLoaded ? (
          latestEssay.map((latestEssay) => {
            return (
              <EssayTitleView
                key={latestEssay.essayID}
                forumID={latestEssay.forumID}
                forumTitle={latestEssay.forumTitle}
                essay={latestEssay}
              />
            );
          })
        ) : (
          <LatestEssaysViewLoading loadingCount={5} />
        )}
      </ListGroup>
    </>
  );
};

export default LatestEssaysView;