import React, { useState, useEffect } from 'react';const WORDS = ['REACT', 'GAME', 'WORDLE', 'CODE', 'GUESS'];const Wordle = () => {  const [solution, setSolution] = useState('');  const [guesses, setGuesses] = useState(Array(6).fill(null));  const [currentGuess, setCurrentGuess] = useState('');  const [gameOver, setGameOver] = useState(false);  useEffect(() => {    const randomWord = WORDS[Math.floor(Math.random() * WORDS.length)];    setSolution(randomWord);  }, []);  useEffect(() => {    const handleKeyDown = (event) => {      if (gameOver) return;      if (event.key === 'Enter') {        if (currentGuess.length !== 5) return;        const newGuesses = [...guesses];        newGuesses[guesses.findIndex(val => val == null)] = currentGuess;        setGuesses(newGuesses);        setCurrentGuess('');        if (currentGuess === solution) {          setGameOver(true);        } else if (newGuesses[5] !== null) {          setGameOver(true);        }      } else if (event.key === 'Backspace') {        setCurrentGuess(currentGuess.slice(0, -1));      } else if (currentGuess.length < 5 && event.key.match(/^[A-Za-z]$/)) {        setCurrentGuess(oldGuess => oldGuess + event.key.toUpperCase());      }    };    window.addEventListener('keydown', handleKeyDown);    return () => window.removeEventListener('keydown', handleKeyDown);  }, [currentGuess, gameOver, guesses, solution]);  return (    <div style={styles.container}>      <h1 style={styles.title}>Wordle Clone</h1>      <div style={styles.grid}>        {guesses.map((guess, i) => {          const isCurrentGuess = i === guesses.findIndex(val => val == null);          return (            <Row              key={i}              guess={isCurrentGuess ? currentGuess : guess ?? ''}              isFinal={!isCurrentGuess && guess != null}              solution={solution}            />          )        })}      </div>      {gameOver && (        <div style={styles.gameOver}>          {guesses.findIndex(val => val === solution) > -1 ? 'You won!' : `You lost! The word was ${solution}`}        </div>      )}    </div>  );};const Row = ({ guess, isFinal, solution }) => {  return (    <div style={styles.row}>      {Array(5).fill(null).map((_, i) => (        <div key={i} style={{          ...styles.cell,          ...(isFinal            ? guess[i] === solution[i]              ? styles.correct              : solution.includes(guess[i])                ? styles.present                : styles.absent: guess[i]              ? styles.filled              : {}),        }}>          {guess[i]}        </div>      ))}    </div>  );};const styles = {  container: {    display: 'flex',    flexDirection: 'column',    alignItems: 'center',    fontFamily: 'Arial, sans-serif',    backgroundColor: '#f0f0f0',    minHeight: '100vh',    padding: '20px',  },  title: {    fontSize: '2.5rem',    marginBottom: '20px',    color: '#333',  },  grid: {    display: 'grid',    gridTemplateRows: 'repeat(6, 1fr)',    gap: '5px',    marginBottom: '20px',  },  row: {    display: 'grid',    gridTemplateColumns: 'repeat(5, 1fr)',    gap: '5px',  },  cell: {    width: '60px',    height: '60px',    border: '2px solid #d3d6da',    fontSize: '2rem',    fontWeight: 'bold',    display: 'flex',    justifyContent: 'center',    alignItems: 'center',    textTransform: 'uppercase',    backgroundColor: 'white',  },  correct: {    backgroundColor: '#6aaa64',borderColor: '#6aaa64',    color: 'white',  },  present: {    backgroundColor: '#c9b458',    borderColor: '#c9b458',    color: 'white',  },  absent: {    backgroundColor: '#787c7e',    borderColor: '#787c7e',    color: 'white',  },  filled: {    borderColor: '#878a8c',  },  gameOver: {    fontSize: '1.5rem',    fontWeight: 'bold',    marginTop: '20px',    padding: '10px 20px',    backgroundColor: '#4CAF50',    color: 'white',    borderRadius: '5px',  },};export default Wordle;