import React from 'react'
import { Statistic, Card } from 'antd';

const iconDivStyle = {
  position: 'absolute',
  top: 20,
  right: 20,
}

const iconStyle = {
  fontSize: '5em',
  color: '#fff',
  opacity: 0.3,
}

export default (props) => {
  const { title, value, icon, backColor = '#fff', frontColor='#000', onClick } = props

  const bodyStyle = {
    background: backColor,
    overflow: 'hidden',
    position: 'relative',
  }

  return (
    <Card bodyStyle={bodyStyle} onClick={onClick}>
      <Statistic
        title={title}
        value={value}
        valueStyle={{ color: frontColor }}
      />
      {
        icon && (
          <div style={iconDivStyle}>
            {React.cloneElement(icon, { style: iconStyle })}
          </div>
        )
      }
    </Card>
  )
}
