import { GetAvatar } from "@/app/[language]/avatar/query/useGetAvatar";
import { useTranslations } from "next-intl";
import { Badge, ListGroup, ListGroupItem } from "reactstrap";

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

export default function QuitStatusValues({
  avatar: { quitStatusValues },
}: {
  avatar: GetAvatar;
}) {
  const t = useTranslations();

  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>
  );
}