import NoteView from "@/app/[language]/note/components/NoteView";
import { useSiteStore } from "@/state/Stores";
import { EtcAPINoteFile } from "@/type/wwwAPI";
import { observer } from "mobx-react-lite";
import { useTranslations } from "next-intl";
import ListGroup from "react-bootstrap/ListGroup";
import ListGroupItem from "react-bootstrap/ListGroupItem";

export default observer<{
  totalNoteFiles: EtcAPINoteFile[];
}>(({ totalNoteFiles }) => {
  const { siteAvatarID } = useSiteStore();

  const t = useTranslations();

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