import React from 'react';
import FlashCard from './FlashCard';
import { FlashCard as FlashCardType } from '../types/FlashCard';

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

const FlashCardDeck: React.FC<FlashCardDeckProps> = ({ flashcards }) => {
  const shuffleFlashcards = () => {
    const shuffled = [...flashcards];
    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]];
    }
    return shuffled;
  };

  const shuffledFlashcards = shuffleFlashcards();

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

export default FlashCardDeck;