import React, { useState, useEffect } from 'react';import ReactDOM from 'react-dom';const WORD_LENGTH = 5;const MAX_GUESSES = 6;const WORDS = ['REACT', 'REDUX', 'HOOKS', 'STATE', 'PROPS']; // Add more words as neededfunction WordleApp() {  const [targetWord, setTargetWord] = useState('');  const [guesses, setGuesses] = useState([]);  const [currentGuess, setCurrentGuess] = useState('');  const [gameOver, setGameOver] = useState(false);  useEffect(() => {    setTargetWord(WORDS[Math.floor(Math.random() * WORDS.length)]);  }, []);  const handleKeyPress = (event) => {    if (gameOver) return;    if (event.key === 'Enter' && currentGuess.length === WORD_LENGTH) {      submitGuess();    } else if (event.key === 'Backspace') {      setCurrentGuess(currentGuess.slice(0, -1));    } else if (currentGuess.length < WORD_LENGTH && event.key.match(/^[a-z]$/i)) {      setCurrentGuess(currentGuess + event.key.toUpperCase());    }  };  const submitGuess = () => {    const newGuesses = [...guesses, currentGuess];    setGuesses(newGuesses);    setCurrentGuess('');    if (currentGuess === targetWord || newGuesses.length === MAX_GUESSES) {      setGameOver(true);    }  };  useEffect(() => {    window.addEventListener('keydown', handleKeyPress);    return () => {      window.removeEventListener('keydown', handleKeyPress);    };  }, [currentGuess, gameOver]);  const renderGuess = (guess) => {    return guess.split('').map((letter, index) => {      let className = 'tile';      if (targetWord[index] === letter) {        className += ' correct';      } else if (targetWord.includes(letter)) {        className += ' present';      } else {        className += ' absent';      }      return <div key={index} className={className}>{letter}</div>;    });  };  return (    <div className="wordle-app">      <h1>Wordle Clone</h1>      <div className="game-board">        {guesses.map((guess, index) => (          <div key={index} className="guess-row">            {renderGuess(guess)}          </div>        ))}{!gameOver && (          <div className="guess-row">            {currentGuess.split('').map((letter, index) => (              <div key={index} className="tile">{letter}</div>            ))}{[...Array(WORD_LENGTH - currentGuess.length)].map((_, index) => (              <div key={index + currentGuess.length} className="tile"></div>            ))}          </div>        )}      </div>      {gameOver && (        <div className="game-over">          {guesses[guesses.length - 1] === targetWord ? 'You won!' : `Game over! The word was ${targetWord}`}        </div>      )}    </div>  );}ReactDOM.render(<WordleApp />, document.getElementById('root'));