import { FlashcardArray } from "react-quizlet-flashcard";

function App() {
  const cards = [
    {
      id: 1,
      front: "What is the capital of <u>Alaska</u>?",
      back: "Juneau",
      frontChild: <div>Hello there</div>
      backChild: <p>This is a back child</p>
    },
    {
      id: 2,
      front: "What is the capital of California?",
      back: "Sacramento",
    },
    {
      id: 3,
      front: "What is the capital of New York?",
      back: "Albany",
    },
    {
      id: 4,
      front: "What is the capital of Florida?",
      back: "Tallahassee",
    },
    {
      id: 5,
      front: "What is the capital of Texas?",
      back: "Austin",
    },
    {
      id: 6,
      front: "What is the capital of New Mexico?",
      back: "Santa Fe",
    },
    {
      id: 7,
      front: "What is the capital of Arizona?",
      back: "Phoenix",
    },
  ];
  return (
    <div>
      <FlashcardArray cards={cards} />
    </div>
  );
}

import { FlashcardArray } from "react-quizlet-flashcard";

function App() {
    const cards = [...]
  return (
    <div>
      <FlashcardArray cards={cards} count={false} control={false} />
    </div>
  );
}

import { FlashcardArray } from "react-quizlet-flashcard";

function App() {
  const cards = [...]
  return (
    <div>
      <FlashcardArray
        cards={cards}
        onCardChange={(cardNumber)=>{
            // called on each card change event
            console.log(cardNumber)
        }}
      />
    </div>
  );
}

import { FlashcardArray } from "react-quizlet-flashcard";
import { useRef } from "react";


function App() {
  const arrayRef = useRef({});
  const cards = [...]
  return (
    <div>
      <FlashcardArray
        cards={cards}
        count={false}
        forwardRef={arrayRef}
        control={false}
      />
       // Here, arrayRef is only mapped to this instance so
       // any number of <FlashcardArray /> can be used in the
       // same page with different refs
      <button onClick={() => arrayRef.current.prevCard()}>Prev</button>
      <button onClick={() => arrayRef.current.nextCard()}>Next</button>
    </div>
  );
}

import { FlashcardArray } from "react-quizlet-flashcard";

function App() {
  const cards = [...];
  return (
    <div>
      <div>
        <FlashcardArray
          cards={deck.cards}
          // Called everytime the card is changed. 
          // You can use useState to store the current card index.
          setCurrentCardIndex={(index) => {
            console.log(index);
          }}
        />
      </div>
    </div>
  );
}

import { FlashcardArray } from "react-quizlet-flashcard";

function App() {
  const cards = [...];
  return (
    <div>
      <div>
        <FlashcardArray
          cards={deck.cards}
          // Callback function invoked every time the card is changed or
          // card is flipped. 
          setCurrentCard={(currentCard) => {
            console.log(currentCard);
          }}
        />
      </div>
    </div>
  );
}	

// Output:
{
    "id": 1,
    "front": "What is the <u>capital</u> of Alaska?",
    "back": "Juneau",
    "options": [...],
    "frontChild": "Hello there",
    "backChild": "THis is back child hehe",
    "index": 0,
    "flipped": true
}

import { FlashcardArray } from "react-quizlet-flashcard";

function App() {
  const cards = [];
  return (
    <div>
      <div>
        <FlashcardArray
          cards={deck.cards}
          // Every time the current card is flipped, this method is invoked
          // with true if card is flipped(Showing its back) or 
          // with false if the card is not flipped(Showing the front)
          setIsFlipped={(isFlip) => {
            console.log(isFlip);
          }}
        />
      </div>
    </div>
  );
}