import { Flex, Progress, Space } from 'antd';
import styles from './index.less';
import { ReactNode } from 'react';

interface Props {
  data: any[];
  title?: string;
  extra?: ReactNode;
  strokeColor?: {
    '0%': string;
    '100%': string;
  };
}

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

  return (
    <div className={styles.wrap}>
      {data.map((item, index) => (
        <Flex key={index} align='center' className={styles.item}>
          <div className={styles.name} title={item?.name}>{item.name}</div>
          <div className={styles.progressBar}>
            <Progress
              percent={item?.percent*100}
              showInfo={false}
              strokeColor={strokeColor}
              trailColor="rgba(144, 205, 229, 0.22)"
            />
          </div>
          <Space size={10} className={styles.numBox}>
            <div className={styles.num}>
              <span>{item?.value}</span>
              <span>件</span>
            </div>
            <div className={styles.num}>
              <span>{item?.percent}</span>
              <span>%</span>
            </div>
          </Space>
        </Flex>
      ))}
    </div>
  );
};

export default ProcessCard1; 