import { Typography } from 'antd';

import { ReactComponent as AddCircle } from '../assets/image/info-icons/add-circle.svg';
import React from 'react';

const StatCard = ({heading, statVal, icon, footing}) => {

    return (
        <div className='stat-card'>
            <div className="head">
                <Typography.Text strong style={{color: 'var(--font-color)'}}>{heading}</Typography.Text>
                <AddCircle />
            </div>
            <div className="mid">
                {icon}
                <Typography.Text className='ml-2-0 center-flex'>{statVal}</Typography.Text> 
            </div>
            <div className="foot">
                <Typography.Text className=''>{footing}</Typography.Text>
            </div>
        </div>
    );
}

export default StatCard;
