import React, { useState, useEffect } from 'react';const WORD_LENGTH = 5;const MAX_GUESSES = 6;const WORDS = ['REACT', 'GAMES', 'WORDLE', 'GUESS', 'SOLVE'];const getRandomWord = () => WORDS[Math.floor(Math.random() * WORDS.length)];export default function WordleGame() {  const [targetWord, setTargetWord] = useState('');  const [guesses, setGuesses] = useState(Array(MAX_GUESSES).fill(''));  const [currentGuess, setCurrentGuess] = useState('');  const [gameOver, setGameOver] = useState(false);  useEffect(() => {    setTargetWord(getRandomWord());  }, []);  const handleKeyPress = (event) => {    if (gameOver) return;    if (event.key === 'Enter' && currentGuess.length === WORD_LENGTH) {      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 (currentGuess.length < WORD_LENGTH && event.key.match(/^[A-Za-z]$/)) {      setCurrentGuess(currentGuess + event.key.toUpperCase());    }  };  useEffect(() => {    window.addEventListener('keydown', handleKeyPress);    return () => {      window.removeEventListener('keydown', handleKeyPress);    };  }, [currentGuess, gameOver]);  const getLetterColor = (letter, index, guess) => {    if (targetWord[index] === letter) {      return '#6aaa64'; // Green    } else if (targetWord.includes(letter)) {      return '#c9b458'; // Yellow    } else {      return '#787c7e'; // Gray    }  };  return (    <div style={{ fontFamily: 'Arial, sans-serif', display: 'flex', flexDirection: 'column', alignItems: 'center', padding: '20px' }}>      <h1 style={{ marginBottom: '20px' }}>Wordle Clone</h1>      <div style={{ display: 'grid', gridTemplateRows: `repeat(${MAX_GUESSES}, 1fr)`, gap: '5px', marginBottom: '20px' }}>        {guesses.map((guess, i) => (          <div key={i} style={{ display: 'flex', gap: '5px' }}>            {Array.from({ length: WORD_LENGTH }).map((_, j) => (              <div                key={j}                style={{                  width: '50px',                  height: '50px',                  border: '2px solid #d3d6da',                  display: 'flex',                  justifyContent: 'center',                  alignItems: 'center',                  fontSize: '2rem',                  fontWeight: 'bold',                  backgroundColor: guess[j] ? getLetterColor(guess[j], j, guess) : 'white',                  color: guess[j] ? 'white' : 'black',                }}              >                {guess[j] || ''}              </div>            ))}          </div>        ))}      </div>      <div style={{ height: '50px', marginBottom: '20px', fontSize: '2rem' }}>        {currentGuess}      </div>      {gameOver && (        <div style={{ fontSize: '1.5rem', fontWeight: 'bold' }}>          {guesses.includes(targetWord) ? 'You won!' : `Game over! The word was ${targetWord}`}        </div>      )}    </div>  );}