import EdgeItem from "@/app/[language]/etc/components/EdgeItem";
import { EtcAPIEdge } from "@/type/wwwAPI";
import { useTranslations } from "next-intl";
import { Badge, ListGroup } from "reactstrap";

export default function TotalEdgesView({
  totalEdges,
}: {
  totalEdges: EtcAPIEdge[];
}) {
  const t = useTranslations();

  return (
    <ListGroup>
      <Badge>{t("etcTotalEdges")}</Badge>
      {totalEdges.map(({ edge, value }) => (
        <EdgeItem
          key={edge}
          edge={edge}
          text={t("avatarCountText", { avatarCount: value })}
        />
      ))}
    </ListGroup>
  );
}