import React, { useState, useEffect } from 'react';const movies = [  "AVATAR", "TITANIC", "FROZEN", "JAWS", "ALIEN", "MATRIX",  "INCEPTION", "GLADIATOR", "CASABLANCA", "PSYCHO"];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 handleGuess = () => {    if (currentGuess.length !== secretMovie.length) {      setMessage(`Your guess must be ${secretMovie.length} characters long.`);      return;    }    const newGuess = currentGuess.toUpperCase();    setGuesses([...guesses, newGuess]);    setCurrentGuess('');    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}.`);    }  };  const renderGuess = (guess) => {    return guess.split('').map((letter, index) => {      let className = 'bg-gray-300';      if (letter === secretMovie[index]) {        className = 'bg-green-500';      } else if (secretMovie.includes(letter)) {        className = 'bg-yellow-500';      }      return (        <span key={index} className={`inline-block w-8 h-8 m-1 ${className} text-center`}>          {letter}        </span>      );    });  };  return (    <div className="max-w-md mx-auto mt-8 p-4 bg-white rounded shadow">      <h1 className="text-2xl font-bold mb-4">Moviedle</h1>      <p className="mb-4">Guess the {secretMovie.length}-letter movie title. You have 6 attempts.</p>      <div className="mb-4">        {guesses.map((guess, index) => (          <div key={index} className="mb-2">            {renderGuess(guess)}          </div>        ))}      </div>      {!gameOver && (        <div className="mb-4">          <input            type="text"            value={currentGuess}            onChange={(e) => setCurrentGuess(e.target.value.toUpperCase())}            maxLength={secretMovie.length}            className="w-full p-2 border rounded"            placeholder={`Enter a ${secretMovie.length}-letter movie title`}          />          <button            onClick={handleGuess}            className="mt-2 w-full bg-blue-500 text-white p-2 rounded hover:bg-blue-600"          >            Guess          </button>        </div>      )}      {message && <p className="text-center font-bold">{message}</p>}      {gameOver && (        <button          onClick={() => window.location.reload()}          className="mt-4 w-full bg-green-500 text-white p-2 rounded hover:bg-green-600"        >          Play Again        </button>      )}    </div>  );};export default Moviedle;