import { observer } from "mobx-react-lite";
import { ListGroup } from "reactstrap";
import WwwLevelItem from "src/avatar/WwwLevelItem";
import { useAvatarStore } from "src/Stores";
import { AvatarWwwLevelLoading } from "src/Loading";

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

  return (
    <ListGroup>
      {isWwwLevelLoading ? (
        <AvatarWwwLevelLoading loadingCount={1} />
      ) : (
        wwwLevels.map(({ levelID, title, levelText, level, date }) => (
          <WwwLevelItem
            key={levelID}
            levelID={levelID}
            title={title}
            levelText={levelText}
            level={level}
            date={date}
          />
        ))
      )}
    </ListGroup>
  );
});