import { observer } from "mobx-react-lite";
import { useTranslation } from "react-i18next";
import { Badge, ListGroup } from "reactstrap";
import LevelItem from "src/avatar/LevelItem";
import { useAvatarStore } from "src/Stores";
import { AvatarLoading } from "../Loading";

export default observer(() => {
  const { wwwLevels, isWwwLevelLoading } = useAvatarStore();
  const { t } = useTranslation();

  return (
    <ListGroup>
      <Badge color="success">{t("wwwLevel")}</Badge>
      {isWwwLevelLoading ? (
        <AvatarLoading />
      ) : (
        wwwLevels.map(({ levelID, title, levelText, level, date }) => (
          <LevelItem
            key={levelID}
            levelID={levelID}
            title={title}
            levelText={levelText}
            level={level}
            date={date}
          />
        ))
      )}
    </ListGroup>
  );
});