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

import { useEtcStore } from "src/Stores";
import EdgeItem from "src/etc/EdgeItem";

export default observer(() => {
  const { totalEdgeValues } = useEtcStore();
  const { t } = useTranslation();

  return (
    <ListGroup>
      <Badge>{t("etcTotalEdges")}</Badge>
      {totalEdgeValues.map(({ edge, value }) => (
        <EdgeItem
          key={edge}
          edge={edge}
          text={sprintf(t("avatarCountText"), value)}
        />
      ))}
    </ListGroup>
  );
});