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

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

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

  const { avatarID } = useAvatarStore();

  return (
    <ListGroup>
      <Badge color="primary">{t("avatarLastsText")}</Badge>
      {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>
  );
});