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

/** @name 突出问题实况直播 */
const ProminentProblemLive: React.FC = () => {
  const areas = [
    {
      name: '非机动车乱停放',
      value: 99.9,
      img: require('@/assets/images/keyArea/q1.png'),
    },
    {
      name: '非机动车乱停放',
      value: 99.9,
      img: require('@/assets/images/keyArea/q2.png'),
    },
  ];
  return (
    <div className={styles.container}>
      <Flex justify="space-between" align="center">
        <div className={styles.title}>突出问题实况转播</div>
        <div className={styles.more}>更多</div>
      </Flex>
      <Flex
        gap={24}
        style={{
          marginTop: 12,
        }}
      >
        {areas.map((item, index) => (
          <div key={index} className={styles.areaCard}>
            <img
              src={item.img}
              alt=""
              style={{
                width: 293,
                height: 170,
              }}
            ></img>
            <div className={styles.descContainer}>
              <div className={styles.name}>{item.name}</div>
              <div style={{ marginTop: 10 }}>
                <Space align="center">
                  <div className={styles.statusBtn}>待处置</div>
                  <div>12345</div>
                </Space>
              </div>
            </div>
          </div>
        ))}
      </Flex>
    </div>
  );
};

export default ProminentProblemLive;
