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

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">
            <div className={styles.name} title={item?.name}>
              {item.name}
            </div>
            <div style={{ flex: 1, paddingLeft: '20px' }}>
              <Progress
                size={{ height: 20 }}
                percent={item?.percent}
                showInfo={false}
                style={{ width: 160, marginTop: 10 }}
                strokeColor={strokeColor}
                status="active"
              />
            </div>
            <Space size={10} className={styles.numBox}>
              <div className={styles.num} title={item?.value}>
                <span>{convertUnits(item.value)?.num}</span>
                <span>{convertUnits(item.value)?.unit}</span>
              </div>
              <div className={styles.num}>
                <span>{item?.percent}</span>
                <span>%</span>
              </div>
            </Space>
          </Flex>
        ))}
      </div>
    </BaseCard>
  );
};

export default ProcessCard;
