import React, { useState } from 'react';
import './App.css';

// Composant fonctionnel App
function App() {
  // État local avec useState
  const [nombreSaisi, setNombreSaisi] = useState(0);
  const [nombreRandom, setNombreRandom] = useState(Math.floor(Math.random() * 10));
  const [nombreEssaie, setNombreEssaie] = useState(0);
  const [message, setMessage] = useState('');

  // Fonction pour récupérer le nombre saisi par l'utilisateur
  const getValue = (e) => {
    setNombreSaisi(parseInt(e.target.value)); // Convertit en nombre entier
  };

  // Fonction pour vérifier si le nombre saisi est correct
  const verifierChiffre = () => {
    if (nombreSaisi === nombreRandom) {
      setNombreEssaie(nombreEssaie + 1);
      setMessage('Bravo');
    } else {
      setNombreEssaie(nombreEssaie + 1);
      setMessage('Essayer Encore');
    }
  };

  // Fonction pour réinitialiser le jeu
  const initialiser = () => {
    setNombreSaisi(0);
    setNombreRandom(Math.floor(Math.random() * 10));
    setNombreEssaie(0);
    setMessage('');
  };

  // Rendu du composant
  return (
    <div>
      <fieldset>
        <legend>Random Game</legend>
        <table>
          <tr>
            <td>
              <input
                type="number"
                onChange={getValue}
                placeholder="Entrez un chiffre entre 0 et 10"
              />
            </td>
            <td>
              <button onClick={verifierChiffre}>Valider</button>
            </td>
          </tr>
        </table>
        <table bgcolor='#aaa'>
          <tr>
            <td>{message}</td>
          </tr>
          <tr>
            <td>{nombreEssaie} Essais</td>
          </tr>
          <tr>
            <td><button onClick={initialiser} style={{ width: '100%' }}>Initialiser</button></td>
          </tr>
        </table>
      </fieldset>
    </div>
  );
}

export default App;