import React, { useState, useEffect } from 'react';const WORD_LENGTH = 5;const MAX_GUESSES = 6;const KEYBOARD_LETTERS = [  'Q', 'W', 'E', 'R', 'T', 'Y', 'U', 'I', 'O', 'P',  'A', 'S', 'D', 'F', 'G', 'H', 'J', 'K', 'L',  'Z', 'X', 'C', 'V', 'B', 'N', 'M'];const getRandomWord = () => {  const words = ['REACT', 'WORLD', 'GUESS', 'WORDLE', 'GAME'];  return words[Math.floor(Math.random() * words.length)];};const App = () => {  const [targetWord, setTargetWord] = useState(getRandomWord());  const [guesses, setGuesses] = useState(Array(MAX_GUESSES).fill(''));  const [currentGuess, setCurrentGuess] = useState('');  const [gameOver, setGameOver] = useState(false);  useEffect(() => {    const handleKeyDown = (event) => {      if (gameOver) return;      if (event.key === 'Enter') {        if (currentGuess.length !== WORD_LENGTH) return;        const newGuesses = [...guesses];        const currentGuessIndex = newGuesses.findIndex(guess => guess === '');        newGuesses[currentGuessIndex] = currentGuess;        setGuesses(newGuesses);        setCurrentGuess('');        if (currentGuess === targetWord || currentGuessIndex === MAX_GUESSES - 1) {          setGameOver(true);        }      } else if (event.key === 'Backspace') {        setCurrentGuess(currentGuess.slice(0, -1));      } else if (event.key.match(/^[a-zA-Z]$/) && currentGuess.length < WORD_LENGTH) {        setCurrentGuess(currentGuess + event.key.toUpperCase());      }    };    window.addEventListener('keydown', handleKeyDown);    return () => window.removeEventListener('keydown', handleKeyDown);  }, [currentGuess, gameOver, guesses, targetWord]);  const getLetterColor = (letter, index, guess) => {    if (targetWord[index] === letter) {      return 'green';    } else if (targetWord.includes(letter)) {      return 'yellow';    } else {      return 'gray';    }  };  return (    <div className="App">      <h1>Wordle Clone</h1>      <div className="game-board">        {guesses.map((guess, i) => (          <div key={i} className="guess-row">            {Array(WORD_LENGTH).fill().map((_, j) => (              <div                key={j}                className="letter-box"                style={{ backgroundColor: guess ? getLetterColor(guess[j], j, guess) : 'white' }}              >                {guess[j] || ''}              </div>            ))}          </div>        ))}      </div>      <div className="current-guess">        {Array(WORD_LENGTH).fill().map((_, i) => (          <div key={i} className="letter-box">            {currentGuess[i] || ''}          </div>        ))}      </div>      <div className="keyboard">        {KEYBOARD_LETTERS.map((letter) => (          <button            key={letter}            onClick={() => {              if (currentGuess.length < WORD_LENGTH && !gameOver) {                setCurrentGuess(currentGuess + letter);              }            }}          >            {letter}          </button>        ))}      </div>      {gameOver && (        <div className="game-over">          <h2>{currentGuess === targetWord ? 'You won!' : 'Game Over'}</h2>          <p>The word was: {targetWord}</p>          <button onClick={() => {            setTargetWord(getRandomWord());            setGuesses(Array(MAX_GUESSES).fill(''));            setCurrentGuess('');            setGameOver(false);          }}>            Play Again          </button>        </div>      )}    </div>  );};export default App;