import React from 'react';
import './NombreDisplay.scss';

/**
 * Composant permettant d'afficher un nombre en couleur dans un catouche carré.
 *
 * @component
 * @param {object} props.nombre - Nombre à afficher
 * @param {string} props.label - Label du nombre à afficher
 * @param {string} props.color - Couleur du nombre à afficher
 * @param {string} props.size - Taille du carré
 * @param {string} props.width - Largeur du rectangle si rectangle
 * @param {string} props.height - Hauteur du rectangle si rectangle
 */
const NombreDisplay = (props) => {
    return (
        <div className="Square" style={{ width: props.width ? props.width : props.size, height: props.height ? props.height : props.size }}>
            <h5>{props.label}</h5>
            <div className="Nombre" style={{ color: props.color }}>
                <strong>{props.nombre}</strong>
            </div>
        </div>
    );
};

export default NombreDisplay;
