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

  const {
    data: latestLoggedInAvatar,
    isFetched: isLatestLoggedInAvatarLoaded,
  } = useGetLatestLoggedInAvatar();

  return (
    <ListGroup>
      <ListGroupItem>{t("latestLoggedInAvatarsView")}</ListGroupItem>
      {isLatestLoggedInAvatarLoaded
        ? latestLoggedInAvatar.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>
  );
}
