import TitleItem from "@/app/[language]/etc/components/TitleItem";
import { EtcAPITitle } from "@/type/wwwAPI";
import { useTranslations } from "next-intl";
import ListGroup from "react-bootstrap/ListGroup";
import ListGroupItem from "react-bootstrap/ListGroupItem";

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

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