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

const HighFrequencyArea: React.FC<{
  areaStatistics?: any[];
}> = memo(({ areaStatistics = [] }) => {
  return (
    <Flex vertical gap={13} className={styles.container}>
      <Space>
        <div className={styles.mark}></div>
        <div className={styles.title}>高发区域top3</div>
      </Space>
      <div className={styles.wrap}>
        {areaStatistics.map((item, index) => (
          <div className={styles.litsItem} key={index}>
            <Flex justify="space-between">
              <div className={styles.name}>{item.name}</div>
              <Space size={10} className={styles.numBox}>
                <div className={styles.num}>
                  <span>{item?.value}</span>
                  <span>件</span>
                </div>
                <div className={styles.num}>
                  <span>{Number(item?.percent ?? 0).toFixed(2)}</span>
                  <span>%</span>
                </div>
              </Space>
            </Flex>

            <Progress
              size={{ height: 15 }}
              percent={item?.percent}
              showInfo={false}
              strokeColor={{ from: '#CF94FF', to: '#3387FF' }}
              status="active"
            />
          </div>
        ))}
      </div>
    </Flex>
  );
});

export default HighFrequencyArea;
