import React, { useState, useEffect } from 'react';const movieList = [  "AVATAR", "TITANIC", "FROZEN", "JAWS", "ALIEN", "MATRIX",  "CASABLANCA", "GLADIATOR", "INCEPTION", "PSYCHO"];const Movdle = () => {  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 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 backgroundColor = 'bg-gray-300';      if (letter === secretMovie[index]) {        backgroundColor = 'bg-green-500';      } else if (secretMovie.includes(letter)) {        backgroundColor = 'bg-yellow-500';      }      return (        <span key={index} className={`inline-block w-8 h-8 m-1 ${backgroundColor} text-center leading-8`}>          {letter}        </span>      );    });  };  return (    <div className="container mx-auto p-4">      <h1 className="text-3xl font-bold mb-4">Movdle</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="border p-2 mr-2"          />          <button onClick={handleGuess} className="bg-blue-500 text-white p-2rounded">            Guess          </button>        </div>      )}      {message && <p className="text-lg font-semibold">{message}</p>}    </div>  );};export default Movdle;