import React from 'react';

/**
 * Composant générique de navigation par liste de sélection déroulante.
 *
 * @component
 * @param {array} props.selectChoix - La liste des options à afficher
 * @param {*} props.selectChoix.id - ID du choix
 * @param {string} props.selectChoix.label - libellé du choix
 * @param {*} props.selectId - Un id pour le composant
 * @param {string} props.selectLabel - Un label pour le composant
 * @param {*} props.value - La valeur sélectionnée
 * @param {*} props.setValue - Fonction permettant de changer la valeur
 * @example
 * return (
 * <GenericNavigationSelect selectChoix={choix} selectId={'choixTest'}
                            selectLabel={'Affichage'}
                            setValue={(value) => setChoix(value)}
                            value={choixValue}/>
 * )
 */
export function GenericNavigationSelect(props) {
    return (
        <>
            <label htmlFor={props.selectId} className="ml-4 mb-0">
                {props.selectLabel}
            </label>
            <div className="form-floating px-2">
                <select id={props.selectId} className="form-control" onChange={({ target }) => props.setValue(target.value)} value={props.value ?? ''}>
                    {props.selectChoix.map((choix) => (
                        <option key={choix.id} value={choix.id}>
                            {choix.label}
                        </option>
                    ))}
                </select>
            </div>
        </>
    );
}
