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

import { LatestCommentsViewLoading } from "src/Loading";
import CommentTitleView from "src/forum/CommentTitleView";
import useGetLatestComment from "src/taehui/useGetLatestComment";

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

  const { data: latestComment, isFetched: isLatestCommentLoaded } =
    useGetLatestComment();

  return (
    <>
      <ListGroup>
        <ListGroupItemHeading>{t("latestCommentsView")}</ListGroupItemHeading>
        {isLatestCommentLoaded ? (
          latestComment.map((latestComment) => {
            return (
              <CommentTitleView
                key={latestComment.commentID}
                forumID={latestComment.forumID}
                essayID={latestComment.essayID}
                comment={latestComment}
              />
            );
          })
        ) : (
          <LatestCommentsViewLoading />
        )}
      </ListGroup>
    </>
  );
};

export default LatestCommentsView;