import React, { useState } from 'react';

// Star component
// Composant représentant une étoile
// Il prend une couleur en prop
const Star = ({ color }) => < span style = {
    { color } } > ★ < /span>;

// Fonction utilitaire pour obtenir la couleur de l'étoile en fonction de la note
const getColorByIndex = (note, index, maxNote) => {
    if (note >= index + 1) {
        if (note < maxNote / 2) return 'red';
        else if (note === Math.round(maxNote / 2)) return 'orange';
        else if (note > maxNote / 2) return 'green';
        else return 'gray';
    } else {
        return 'gray';
    }
};

// Composant principal de l'application
export const App = ({ numStars = 3 }) => {
    const [note, setNote] = useState(0); // Utilisation de l'état pour stocker la note

    // Fonction pour générer les étoiles en fonction de la note
    const updateStars = () => {
        return Array.from({ length: numStars }, (_, index) => ( <
            Star key = { index }
            color = { getColorByIndex(note, index, numStars) }
            />
        ));
    };

    // useEffect pour effectuer une action lorsque la note change
    useEffect(() => {
        // Vous pouvez ajouter ici des actions à effectuer lorsque la note change
        console.log('La note a été mise à jour :', note);
    }, [note]); // Le useEffect sera exécuté à chaque changement de la valeur 'note'

    return ( <
        div >
        <
        p style = {
            { marginBottom: 0 } } > note < /p> <
        input type = "number"
        name = "note"
        min = "0"
        max = { numStars }
        value = { note }
        // Gestionnaire d'événements pour mettre à jour la note lors de la saisie
        onChange = {
            (e) => setNote(parseInt(e.target.value)) }
        />

        <
        p > { note === 0 ? 'Aucune note' : updateStars() } < /p> <
        /div>
    );
};

export default App;