import React, {ReactNode} from 'react';
import './infobox.scss'

type InfoBoxProps = {
    icon: any
    title: string
    children: ReactNode
    split?: boolean //splits in two equal halves
}

const InfoBox = ({icon, title, children, split=true}: InfoBoxProps) => {

    return (
        <div className={`info-box ${split && 'split'}`}>
            <div className="info-box--left half">
                <img src={icon} alt=""/>
                <p>{title}</p>
            </div>
            <div className="info-box--right half">
                {children}
            </div>
        </div>
    );
}

export default InfoBox;