import DescriptionItem from '@/components/DescriptionItem';
import { Flex } from 'antd';
import React from 'react';
import styles from './index.less';

const PerceptionSource: React.FC = () => {
  const commonValueStyle = {
    background: 'linear-gradient(180deg, #AAFFF6 0%, #25BBFF 100%)',
    WebkitBackgroundClip: 'text',
    WebkitTextFillColor: 'transparent',
    fontFamily: 'D-DIN',
    fontSize: '36px',
    fontWeight: 700,
  };

  const commonLabelStyle = {
    color: '#BCCEE9',
    // fontFamily: '微软雅黑',
    fontSize: '20px',
    fontWeight: 400,
    lineHeight: 1.1,
  };

  const commonUnitStyle = {
    color: '#BCCEE9',
    // fontFamily: '微软雅黑',
    fontSize: '20px',
    fontWeight: 400,
    lineHeight: 1.1,
  };

  return (
    <div className={styles.container}>
      <Flex gap={20}>
        <DescriptionItem
          value={238}
          name="接入总量"
          unit="万个"
          valueStyle={commonValueStyle}
          labelStyle={commonLabelStyle}
          unitStyle={commonUnitStyle}
        />
        <DescriptionItem
          value={44}
          name="设备类型"
          unit="类"
          valueStyle={commonValueStyle}
          labelStyle={commonLabelStyle}
          unitStyle={commonUnitStyle}
          style={{ marginLeft: '50px' }}
        />
      </Flex>
    </div>
  );
};

export default PerceptionSource;
