// src/components/FlashCardDeck.tsx
import React, { useState } from 'react';
import FlashCard from './FlashCard';
import { FlashCard as FlashCardType } from '../types/FlashCard';

type FlashCardDeckProps = {
  flashcards: FlashCardType[];
};

const FlashCardDeck: React.FC<FlashCardDeckProps> = ({ flashcards }) => {
  const [shuffledFlashcards, setShuffledFlashcards] = useState(flashcards);

  const shuffleFlashcards = () => {
    const shuffled = [...shuffledFlashcards];
    for (let i = shuffled.length - 1; i > 0; i--) {
      const j = Math.floor(Math.random() * (i + 1));
      [shuffled[i], shuffled[j]] = [shuffled[j], shuffled[i]];
    }
    setShuffledFlashcards(shuffled);
  };

  return (
    <div>
      <button onClick={shuffleFlashcards}>Shuffle</button>
      {shuffledFlashcards.map((flashcard) => (
        <FlashCard key={flashcard.id} flashCard={flashcard} />
      ))}
    </div>
  );
};

export default FlashCardDeck;