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

/**
 * Composant permettant d'afficher le taux d'armement dans un cartouche.
 *
 * @component
 * @param {object} props.nombres - Les nombres à 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 TauxArmementDisplay = (props) => {
    return (
        <div className="Square" style={{ width: props.width ? props.width : props.size, height: props.height ? props.height : props.size }}>
            <h5>
                Taux d'armement <br /> <strong>Projeté</strong> | <strong style={{ color: 'red' }}> Cible</strong>
            </h5>
            <div className="Nombre" style={{ color: props.color }}>
                <strong>{props.nombres[0] !== i18n.global.donnees.vide ? props.nombres[0] + '%' : props.nombres[0]}</strong>
                {' | '}
                <strong style={{ color: 'red' }}>{props.nombres[1] !== i18n.global.donnees.vide ? props.nombres[1] + '%' : props.nombres[1]}</strong>
            </div>
        </div>
    );
};

export default TauxArmementDisplay;
