import { useTranslation } from "react-i18next";
import { ListGroup, ListGroupItemHeading } from "reactstrap";

import { LatestEssaysViewLoading } from "src/Loading";
import EssayTitleView from "src/forum/EssayTitleView";
import useGetLatestEssay from "src/taehui/useGetLatestEssay";

const LatestEssaysView = () => {
  const { t } = useTranslation();

  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 />
        )}
      </ListGroup>
    </>
  );
};

export default LatestEssaysView;