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