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

export default observer(() => {
  const { levels, isLoading } = useAvatarStore();
  const { t } = useTranslation();

  if (!isLoading && !levels.length) {
    return null;
  }

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