import LatestAvatarView from "@/app/[language]/components/LatestAvatarView";
import useGetLatestEnrolledAvatar from "@/app/[language]/query/useGetLatestEnrolledAvatar";
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 LatestEnrolledAvatarsView() {
  const t = useTranslations();

  const {
    data: latestEnrolledAvatar,
    isFetched: isLatestEnrolledAvatarLoaded,
  } = useGetLatestEnrolledAvatar();

  return (
    <ListGroup>
      <ListGroupItem>{t("latestEnrolledAvatarsView")}</ListGroupItem>
      {isLatestEnrolledAvatarLoaded
        ? latestEnrolledAvatar.map(({ avatarID, avatarName, date }) => (
            <ListGroupItem key={avatarID}>
              <LatestAvatarView
                avatarID={avatarID}
                avatarName={avatarName}
                date={date}
              />
            </ListGroupItem>
          ))
        : [...Array(5).keys()].map((i) => (
            <ListGroupItem key={i}>
              <LatestAvatarView
                avatarID=""
                avatarName="Loading..."
                date={getDatetime()}
              />
            </ListGroupItem>
          ))}
    </ListGroup>
  );
}