import { ReactNode } from 'react'
import { Flex, Progress, Space } from 'antd'
import type { ProgressProps } from 'antd';
import styles from './index.less'
import BaseCard from '@/pages/Common/components/BaseCard';

interface Props {
  data: any[];
  title: string;
  extra?: ReactNode;
  style?: React.CSSProperties,
  strokeColor?: ProgressProps['strokeColor']
}

const ProcessCard = (props: Props) => {
  const { title, extra, data, strokeColor } = props

  return (
    <BaseCard
      title={title}
      extra={extra}
      style={{
        padding: '15px 0',
        height: 180
      }}
    >
      <div className={styles.wrap}>
        {
          data.map((item, index) => (
            <Flex key={index} align='center' justify='space-between'>
              <div className={styles.name}>{item.name}</div>
              <Progress
                size={[160, 20]}
                percent={item.percent}
                showInfo={false}
                style={{ width: 160, marginTop: 10 }}
                strokeColor={strokeColor}
                status="active"
              />
              <Space size={10} className={styles.numBox}>
                <span>
                  <span className={styles.num}>{item.value}</span>
                  <span>件</span>
                </span>
                <span>
                  <span className={styles.num}>{item.percent}</span>
                  <span>%</span>
                </span>
              </Space>
            </Flex>
          ))
        }
      </div>
    </BaseCard>
  )
}

export default ProcessCard