import React, { useState, useEffect } from 'react';const WORD_LENGTH = 5;const MAX_GUESSES = 6;const WORDS = ['REACT', 'CLONE', 'WORDLE', 'GUESS', 'GAME'];const WordleClone = () => {  const [targetWord, setTargetWord] = useState('');  const [guesses, setGuesses] = useState(Array(MAX_GUESSES).fill(''));  const [currentGuess, setCurrentGuess] = useState('');  const [guessIndex, setGuessIndex] = useState(0);  const [gameOver, setGameOver] = useState(false);  const [message, setMessage] = useState('');  useEffect(() => {    setTargetWord(WORDS[Math.floor(Math.random() * WORDS.length)]);  }, []);  const handleKeyPress = (event) => {    if (gameOver) return;    if (event.key === 'Enter') {      if (currentGuess.length !== WORD_LENGTH) {        setMessage('Word must be 5 letters long');        return;      }      const newGuesses = [...guesses];      newGuesses[guessIndex] = currentGuess;      setGuesses(newGuesses);            if (currentGuess === targetWord) {        setMessage('Congratulations! You won!');        setGameOver(true);      } else if (guessIndex === MAX_GUESSES - 1) {        setMessage(`Game over. The word was ${targetWord}`);        setGameOver(true);      } else {        setGuessIndex(guessIndex + 1);        setCurrentGuess('');      }    } else if (event.key === 'Backspace') {      setCurrentGuess(currentGuess.slice(0, -1));    } else if (event.key.match(/^[a-z]$/i)) {      if (currentGuess.length < WORD_LENGTH) {        setCurrentGuess((prev) => (prev + event.key).toUpperCase());      }    }  };  useEffect(() => {    window.addEventListener('keydown', handleKeyPress);    return () => {      window.removeEventListener('keydown', handleKeyPress);    };  }, [currentGuess, guessIndex, gameOver, targetWord]);  const getLetterColor = (letter, index, guess) => {    if (targetWord[index] === letter) {      return '#6aaa64'; // green    } else if (targetWord.includes(letter)) {      return '#c9b458'; // yellow    } else {      return '#787c7e'; // grey    }  };  return (    <div style={{ fontFamily: 'Arial, sans-serif', maxWidth: '500px', margin: '0 auto', textAlign: 'center' }}>      <h1 style={{ color: '#1a1a1b' }}>Wordle Clone</h1>      <div>        {guesses.map((guess, i) => (          <div key={i} style={{ display: 'flex', justifyContent: 'center', margin: '5px 0' }}>            {Array(WORD_LENGTH).fill().map((_, j) => (              <div                key={j}                style={{                  width: '50px',                  height: '50px',                  border: '2px solid #d3d6da',                  margin: '0 5px',                  display: 'flex',                  justifyContent: 'center',                  alignItems: 'center',                  fontSize: '2rem',                  fontWeight: 'bold',                  color: '#ffffff',                  backgroundColor: guess[j] ? getLetterColor(guess[j], j, guess) : 'transparent',                }}              >                {guess[j] || ''}              </div>            ))}          </div>        ))}      </div>      <div style={{ marginTop: '20px', fontSize: '1.2rem', minHeight: '30px' }}>{message}</div>      <div style={{ marginTop: '20px' }}>        Current guess: {currentGuess}      </div>{gameOver && (        <button          onClick={() => {            setTargetWord(WORDS[Math.floor(Math.random() * WORDS.length)]);            setGuesses(Array(MAX_GUESSES).fill(''));            setCurrentGuess('');            setGuessIndex(0);            setGameOver(false);            setMessage('');          }}          style={{            marginTop: '20px',            padding: '10px 20px',            fontSize: '1rem',            backgroundColor: '#4CAF50',            color: 'white',            border: 'none',            borderRadius: '5px',            cursor: 'pointer'          }}        >          Play Again        </button>      )}    </div>  );};export default WordleClone;