text: import "./App.css";
  import faker from "faker";
  
  import React, { useState, useEffect } from "react";
  
  import Header from "./components/Header";
  import Figure from "./components/Figure";
  import WrongLetters from "./components/WrongLetters";
  import Word from "./components/Word";
  import Popup from "./components/Popup";
  
  const words = [];
  for (var i = 0; i < 10; i++) {
    words.push(faker.animal.dog().toLowerCase());
  }
  let selectedWord = words[Math.floor(Math.random() * words.length)];
  
  function App() {
    const [correctLetters, setCorrectLetters] = useState([]);
    const [wrongLetters, setWrongLetters] = useState([]);
  
    useEffect(() => {
      const handleKeydown = (event) => {
        const { key, keyCode } = event;
        if (keyCode >= 65 && keyCode <= 90) {
          const letter = key.toLowerCase();
          if (selectedWord.includes(letter)) {
            if (!correctLetters.includes(letter)) {
              setCorrectLetters((currentLetters) => [...currentLetters, letter]);
            }
          } else {
            if (!wrongLetters.includes(letter)) {
              setWrongLetters((currentLetters) => [...currentLetters, letter]);
            }
          }
        }
      };
      window.addEventListener("keydown", handleKeydown);
  
      return () => window.removeEventListener("keydown", handleKeydown);
    }, [correctLetters, wrongLetters]);
  
    return (
      <>
        <Header />
        <div className="game-container">
          <Figure wrongLetters={wrongLetters} />
          <WrongLetters wrongLetters={wrongLetters} />
          <Word selectedWord={selectedWord} correctLetters={correctLetters} />
        </div>
        <Popup
          correctLetters={correctLetters}
          wrongLetters={wrongLetters}
          selectedWord={selectedWord}
        />
      </>
    );
  }
  
  export default App;
  