import React from 'react';
import { StatisticCard } from '@ant-design/pro-card';

const { Divider } = StatisticCard;
const iconDivStyle = {
  position: 'absolute',
  top: '4px',
  right: '-30px',
}

const iconStyle = {
  fontSize: '10em',
  color: '#fff',
  opacity: 0.45,
}

export default (props) => {
  const { title, data1, data2, icon, onClick1, onClick2, backColor = '#fff', frontColor = '#000' } = props

  const headStyle = {
    background: backColor,
    color: frontColor,
  }

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

  const groupBodyStyle = {
    ...bodyStyle,
    padding: 0,
  }

  const valueStyle = {
    color: frontColor
  }

  const headTitleStyle = {
    color: frontColor,
    fontSize: '19px',
    fontWeight: 700,
    letterSpacing: '2px',
  }

  const titleStyle = {
    color: frontColor,
  }

  return (
    <StatisticCard.Group title={<div style={headTitleStyle}>{title}</div>} headStyle={headStyle} bodyStyle={groupBodyStyle}>
      <StatisticCard
        bodyStyle={bodyStyle}
        statistic={{ ...data1, title: (<div style={titleStyle}>{data1.title}</div>), valueStyle }}
        onClick={onClick1}
      />
      <Divider type="vertical" />
      <StatisticCard
        bodyStyle={bodyStyle}
        statistic={{ ...data2, title: (<div style={titleStyle}>{data2.title}</div>), valueStyle }}
        onClick={onClick2}
      />
      {
        icon && (
          <div style={iconDivStyle}>
            {React.cloneElement(icon, { style: iconStyle })}
          </div>
        )
      }
    </StatisticCard.Group>
  )
}