import { GetAvatar } from "@/avatar/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> ); }