import { observer } from "mobx-react-lite";
import { useTranslation } from "react-i18next";
import { Badge, ListGroup } from "reactstrap";

import { useAvatarStore } from "src/Stores";
import NoteItem from "src/note/NoteItem";
import { AvatarLoading } from "../Loading";

export default observer(() => {
  const { lasts, isLastsLoading } = useAvatarStore();
  const { t } = useTranslation();

  const { avatarID } = useAvatarStore();

  return (
    <ListGroup>
      <Badge color="primary">{t("avatarLastsText")}</Badge>
      {isLastsLoading ? (
        <AvatarLoading />
      ) : (
        lasts.map(
          ({ noteID, artist, title, genre, levelText, level, fittedText }) => (
            <NoteItem
              key={noteID}
              noteID={noteID}
              artist={artist}
              title={title}
              genre={genre}
              levelText={levelText}
              level={level}
              fittedText={fittedText}
              wantAvatarID={avatarID}
            />
          ),
        )
      )}
    </ListGroup>
  );
});