import React  from 'react'
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"

import "./info-panel.styles.scss"

const InfoPanelComponent = ({title, count, iconName, colorName}) => {
    return (  
        <div className="panel info-box panel-white">
            <div className="panel-body">
                <div className="d-flex justify-content-between">
                    <div className="info-box-stats">
                        <p className={`counter f-${colorName}`}>{count}</p>
                        <span className="info-box-title">{title}</span>
                    </div>
                    <div className={`info-box-icon bg-${colorName}`}>
                        <FontAwesomeIcon size="2x" icon={iconName}/>
                    </div>

                </div>
            </div>
        </div>
    )
}

export default InfoPanelComponent
