import React from 'react';
import './FactoidWidget.scss';
import { IFactoid } from '../../../../services/service-types/FactoidTypes';

export interface IFactoidWidgetProps {
    factoid: IFactoid;
    isWidgetSelected: boolean;
}

const FactoidWidget: React.FC<IFactoidWidgetProps> = (props) => {
    const factoid = props.factoid;
    return (
        <div className={'factoid-widget card' + (props.isWidgetSelected ? ' widget-selected' : '')} data-test="factoid-card">
            <div>
                <div className="factoid-main-body container">
                    <div className="row h-100 justify-content-center align-items-center">
                        <div className="col-6">
                            <h1 className="factoid-icon" aria-hidden="true">
                                <i className={'fa ' + factoid.fontAwesomeIcon} data-test="font-awesome-icon"></i>
                            </h1>
                        </div>
                        <div className="col-6">
                            <h3 data-test="factoid-value">{factoid.cumulativeValue}</h3>
                            <p data-test="factoid-name">{factoid.name}</p>
                        </div>
                    </div>
                </div>
                <ul className="list-group list-group-flush">
                    <li className="list-group-item">
                        <p data-test="factoid-description">{factoid.description}</p>
                    </li>
                </ul>
            </div>
        </div>
    );
};

export default FactoidWidget;