import React, { useState, useEffect } from 'react';import './Moviedle.css';const movies = [  "AVATAR", "TITANIC", "FROZEN", "JAWS", "ALIEN", "MATRIX",  "BATMAN", "SHREK", "ROCKY", "PSYCHO", "CASABLANCA", "GLADIATOR"];const Moviedle = () => {  const [secretMovie, setSecretMovie] = useState('');  const [guesses, setGuesses] = useState([]);  const [currentGuess, setCurrentGuess] = useState('');  const [gameOver, setGameOver] = useState(false);  const [message, setMessage] = useState('');  useEffect(() => {    setSecretMovie(movies[Math.floor(Math.random() * movies.length)]);  }, []);  const handleInputChange = (e) => {    setCurrentGuess(e.target.value.toUpperCase());  };  const handleSubmit = (e) => {    e.preventDefault();    if (currentGuess.length !== secretMovie.length) {      setMessage(`Please enter a ${secretMovie.length}-letter movie title.`);      return;    }    if (!movies.includes(currentGuess)) {      setMessage('Movie not in our list. Try again.');      return;    }    const newGuesses = [...guesses, currentGuess];    setGuesses(newGuesses);    setCurrentGuess('');    if (currentGuess === 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 className = 'letter';      if (letter === secretMovie[index]) {        className += 'correct';      } else if (secretMovie.includes(letter)) {        className += 'present';      } else {        className += 'absent';      }      return <span key={index} className={className}>{letter}</span>;    });  };  return (    <div className="moviedle">      <h1>Moviedle</h1>      <p>Guess the {secretMovie.length}-letter movie title. You have 6 tries.</p>      <div className="guesses">        {guesses.map((guess, index) => (          <div key={index} className="guess">{renderGuess(guess)}</div>        ))}      </div>      {!gameOver && (        <form onSubmit={handleSubmit}>          <input            type="text"            value={currentGuess}            onChange={handleInputChange}            maxLength={secretMovie.length}            disabled={gameOver}          />          <button type="submit">Guess</button>        </form>      )}      <p className="message">{message}</p>    </div>  );};export default Moviedle;