import { useTranslation } from "react-i18next";
import { Badge, ListGroup, ListGroupItem } from "reactstrap";

import { GetAvatar } from "src/avatar/useGetAvatar";

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

export default function QuitStatusValues({
  avatar: { quitStatusValues },
}: {
  avatar: GetAvatar;
}) {
  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>
  );
}