import NoteItem from "@/app/[language]/note/components/NoteItem";
import { EtcAPINoteFile } from "@/type/wwwAPI";
import { useTranslations } from "next-intl";
import { Badge, ListGroup } from "reactstrap";

export default function TotalNoteFilesView({
  totalNoteFiles,
}: {
  totalNoteFiles: EtcAPINoteFile[];
}) {
  const t = useTranslations();

  return (
    <ListGroup>
      <Badge>{t("etcTotalNoteFiles")}</Badge>
      {totalNoteFiles.map(
        ({ noteID, artist, title, genre, levelText, level, value }) => (
          <NoteItem
            key={noteID}
            noteID={noteID}
            artist={artist}
            title={title}
            genre={genre}
            levelText={levelText}
            level={level}
            fittedText={t("textHandled", { value })}
          />
        ),
      )}
    </ListGroup>
  );
}