import { GetAvatar } from "@/app/[language]/avatar/query/useGetAvatar";
import { useTranslations } from "next-intl";
import Card from "react-bootstrap/Card";
import CardHeader from "react-bootstrap/CardHeader";
import CardBody from "react-bootstrap/CardBody";
import CardText from "react-bootstrap/CardText";

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

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

  return (
    <Card>
      <CardHeader>{t("avatarQuitStatusText")}</CardHeader>
      <CardBody>
        {quitStatusItems.map((quitItem) => (
          <CardText key={quitItem}>
            <span className={`quit ${quitItem}`}>{quitItem}</span>
            {quitStatusValues[quitStatusItems.indexOf(quitItem)]}
          </CardText>
        ))}
      </CardBody>
    </Card>
  );
}