import React, { useState, useEffect } from 'react';const movieList = [  "AVATAR", "TITANIC", "JAWS", "ALIEN", "FROZEN", "GLADIATOR", "INCEPTION", "MATRIX",  "CASABLANCA", "PSYCHO", "GODFATHER", "JURASSIC", "PULP FICTION", "STAR WARS"];const Moviedle = () => {  const [secretMovie, setSecretMovie] = useState('');  const [guess, setGuess] = useState('');  const [guesses, setGuesses] = useState([]);  const [feedback, setFeedback] = useState([]);  const [gameOver, setGameOver] = useState(false);  const [message, setMessage] = useState('');  useEffect(() => {    setSecretMovie(movieList[Math.floor(Math.random() * movieList.length)]);  }, []);  const handleGuess = () => {    if (guess.length === 0) return;        const newGuess = guess.toUpperCase();    setGuesses([...guesses, newGuess]);        const newFeedback = Array(newGuess.length).fill('');    for (let i = 0; i < newGuess.length; i++) {      if (newGuess[i] === secretMovie[i]) {        newFeedback[i] = 'correct';      } else if (secretMovie.includes(newGuess[i])) {        newFeedback[i] = 'present';      } else {        newFeedback[i] = 'absent';      }    }    setFeedback([...feedback, newFeedback]);    if (newGuess === secretMovie) {      setGameOver(true);      setMessage('Congratulations! You guessed the movie!');    } else if (guesses.length === 5) {      setGameOver(true);      setMessage(`Game over! The movie was ${secretMovie}`);    }    setGuess('');  };  const renderGuesses = () => {    return guesses.map((g, index) => (      <div key={index} style={{ display: 'flex', marginBottom: '5px' }}>        {g.split('').map((letter, i) => (          <div            key={i}            style={{              width: '30px',              height: '30px',              border: '1px solid #ccc',              display: 'flex',              justifyContent: 'center',              alignItems: 'center',              backgroundColor:                 feedback[index][i] === 'correct' ? '#6aaa64' :                feedback[index][i] === 'present' ? '#c9b458' :                '#787c7e',              color: 'white',              fontWeight: 'bold',              margin: '0 2px'            }}          >            {letter}          </div>        ))}      </div>    ));  };  return (    <div style={{ fontFamily: 'Arial, sans-serif', maxWidth: '600px', margin: '0 auto', padding: '20px' }}>      <h1 style={{ textAlign: 'center', color: '#333' }}>Moviedle</h1>      <p style={{ textAlign: 'center', marginBottom: '20px' }}>Guess the movie title in 6 tries!</p>            <div style={{ marginBottom: '20px' }}>        {renderGuesses()}      </div>            {!gameOver && (        <div style={{ display: 'flex', marginBottom: '20px' }}>          <input            type="text"            value={guess}            onChange={(e) => setGuess(e.target.value)}            style={{ flex: 1, padding: '10px', fontSize: '16px' }}            placeholder="Enter your guess"            maxLength={secretMovie.length}          />          <button            onClick={handleGuess}            style={{              padding: '10px 20px',              fontSize: '16px',              backgroundColor: '#4CAF50',              color: 'white',              border: 'none',              cursor: 'pointer'            }}          >            Guess          </button>        </div>      )}            {message && <p style={{ textAlign: 'center', fontWeight: 'bold' }}>{message}</p>}            {gameOver && (        <button          onClick={() => window.location.reload()}          style={{            display: 'block',            margin: '20px auto',            padding: '10px 20px',            fontSize: '16px',            backgroundColor: '#008CBA',            color: 'white',            border: 'none',            cursor: 'pointer'          }}        >          Play Again        </button>      )}    </div>  );};export default Moviedle;