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

const quitItems = ["S+", "S", "A+", "A", "B", "C", "D"];

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

  return (
    <ListGroup>
      <Badge>{t("avatarQuitStatusText")}</Badge>
      {quitItems.map((quitItem) => (
        <ListGroupItem key={quitItem}>
          <span className={quitItem}>{quitItem}</span>{" "}
          <span>{quitStatusValues[quitItems.indexOf(quitItem)]}</span>
        </ListGroupItem>
      ))}
    </ListGroup>
  );
});