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

import TitleItem from "src/etc/TitleItem";
import { EtcAPITitle } from "src/wwwAPI";

export default function TotalTitlesView({
  totalTitles,
}: {
  totalTitles: EtcAPITitle[];
}) {
  const { t } = useTranslation();

  return (
    <ListGroup>
      <Badge>{t("etcTotalTitles")}</Badge>
      {totalTitles.map(({ title, titleColor, value }) => (
        <TitleItem
          key={title}
          title={title}
          titleColor={titleColor}
          text={sprintf(t("avatarCountText"), value)}
        />
      ))}
    </ListGroup>
  );
}