import TitleItem from "@/etc/TitleItem";
import { EtcAPITitle } from "@/wwwAPI";
import { useTranslations } from "next-intl";
import { Badge, ListGroup } from "reactstrap";

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

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