import React, { Component } from 'react';
import { Tooltip, Icon } from 'antd';
import { PageComponent,} from '../../types/index';



type configType = {
    title: string;
    transFunc: Function;
    tooltip?: string | React.ReactNode;
}



export default class OverviewCard extends Component<PageComponent<{
    data: number | string;
    config: configType;
}>>{
    render() {
        const { data, config } = this.props;
        return (
            <div className='jad-overview-card-box'>
                <div className='overview-card-1st-line'>
                    <span>{config['title']}</span>
                    {config['tooltip'] && <Tooltip title={config['tooltip']}><Icon type="info-circle" className='overview-card-1st-icon' ></Icon></Tooltip>}
                </div>
                <div className='overview-card-2nd-line' >
                    {config['transFunc'](data)}
                    {config['title'].includes('率') && (data || data === 0 ) ? ' %' : ''}
                </div>
            </div>
        )
    }
}