import React from 'react';
import './NombreDisplay.scss';
import { BsArrowDownRight, BsArrowUpRight, CgMathEqual } from 'react-icons/all';

/**
 * Composant permettant d'afficher le nombre de militaire et la tendence des effectifs dans un cartouche carré.
 *
 * @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é
 */
const NbMilitaireEtTendance = (props) => {
    const diff = props.nombres[0] - props.nombres[1];

    return (
        <div className="Square" style={{ width: props.width ? props.width : props.size, height: props.height ? props.height : props.size }}>
            <h5>Nombre de militaires dans la/les FE et tendance des effectifs</h5>
            <div className="Nombre" style={{ color: props.color }}>
                <strong>
                    {props.nombres[0] && props.nombres[0] + ' '}
                    {diff > 0 && <BsArrowUpRight style={{ color: 'green', marginBottom: '8px' }} size={'40px'} />}
                    {diff < 0 && <BsArrowDownRight style={{ color: 'red', marginBottom: '8px' }} size={'40px'} />}
                    {diff === 0 && <CgMathEqual style={{ color: 'gray', marginBottom: '8px' }} size={'40px'} />}
                </strong>
            </div>
        </div>
    );
};

export default NbMilitaireEtTendance;
