import React, { useState, useEffect } from 'react';const movieList = [  "AVATAR", "TITANIC", "JAWS", "ALIEN", "FROZEN", "GLADIATOR", "INCEPTION",  "MATRIX", "CASABLANCA", "PSYCHO", "GODFATHER", "JURASSIC", "PULP FICTION"];const Moviele = () => {  const [secretMovie, setSecretMovie] = useState('');  const [guesses, setGuesses] = useState([]);  const [currentGuess, setCurrentGuess] = useState('');  const [gameOver, setGameOver] = useState(false);  const [message, setMessage] = useState('');  useEffect(() => {    setSecretMovie(movieList[Math.floor(Math.random() * movieList.length)]);  }, []);  const handleGuess = () => {    if (currentGuess.length !== secretMovie.length) {      setMessage(`Your guess must be ${secretMovie.length} characters long.`);      return;    }    const newGuesses = [...guesses, currentGuess.toUpperCase()];    setGuesses(newGuesses);    setCurrentGuess('');    if (currentGuess.toUpperCase() === secretMovie) {      setGameOver(true);      setMessage('Congratulations! You guessed the movie!');    } else if (newGuesses.length >= 6) {      setGameOver(true);      setMessage(`Game over! The movie was ${secretMovie}.`);    }  };  const renderGuess = (guess) => {    return guess.split('').map((letter, index) => {      let backgroundColor = 'gray';      if (letter === secretMovie[index]) {        backgroundColor = 'green';      } else if (secretMovie.includes(letter)) {        backgroundColor = 'yellow';      }      return (        <span key={index} style={{          backgroundColor,          color: 'white',          padding: '5px',          margin: '2px',          borderRadius: '5px'        }}>          {letter}        </span>      );    });  };  return (    <div style={{ fontFamily: 'Arial, sans-serif', maxWidth: '600px', margin: '0 auto', textAlign: 'center' }}>      <h1 style={{ color: '#333' }}>Moviele</h1>      <p>Guess the movie title! You have 6 attempts.</p>      {guesses.map((guess, index) => (        <div key={index} style={{ margin: '10px 0' }}>{renderGuess(guess)}</div>      ))}      {!gameOver && (        <div>          <input            type="text"            value={currentGuess}            onChange={(e) => setCurrentGuess(e.target.value)}            maxLength={secretMovie.length}            style={{ padding: '5px', marginRight: '5px' }}          />          <button onClick={handleGuess} style={{ padding: '5px 10px', backgroundColor: '#4CAF50', color: 'white', border: 'none', borderRadius: '3px' }}>            Guess          </button>        </div>      )}      <p>{message}</p>      {gameOver && (        <button onClick={() => window.location.reload()} style={{ padding: '10px 20px', backgroundColor: '#008CBA', color: 'white', border: 'none', borderRadius: '3px', marginTop: '20px' }}>          Play Again        </button>      )}    </div>  );};export default Moviele;