import { Badge, ListGroup } from "reactstrap";

import NoteItem from "src/note/NoteItem";
import { EtcAPINote } from "src/wwwAPI";

export default function FavoritesView({
  title,
  favorites,
}: {
  title: string;
  favorites: EtcAPINote[];
}) {
  return (
    <ListGroup>
      <Badge>{title}</Badge>
      {favorites.map(
        ({ noteID, artist, title, genre, levelText, level, value }) => (
          <NoteItem
            key={noteID}
            noteID={noteID}
            artist={artist}
            title={title}
            genre={genre}
            levelText={levelText}
            level={level}
            fittedText={`👍 ${value}`}
          />
        ),
      )}
    </ListGroup>
  );
}