import DescriptionItem from '@/components/DescriptionItem';
import { useGlobalModalServices } from '@/pages/GlobalModalServices/provider';
import React from 'react';
import styles from './index.less';

const MonitorInfo: React.FC = () => {
  const { dispatch } = useGlobalModalServices();

  const commonValueStyle = {
    fontFamily: 'D-DIN Exp',
    fontSize: '36px',
    fontWeight: '700',
    background: 'linear-gradient(180deg, #9CF8F7 0%, #25BBFF 100%)',
    WebkitBackgroundClip: 'text',
    WebkitTextFillColor: 'transparent',
  };

  const commonLabelStyle = {
    color: '#BCCEE9',
    fontSize: '20px',
    marginTop: '-4px',
  };

  const commonUnitStyle = {
    color: '#BCCEE9',
    fontSize: '20px',
  };

  return (
    <div className={styles.container}>
      <div className={styles.header}>
        <span className={styles.title}>监测信息</span>
      </div>
      <div className={styles.content}>
        <div className={styles.monitorStats}>
          <DescriptionItem
            // value={123}
            name="接入感知设备"
            unit="个"
            valueStyle={commonValueStyle}
            labelStyle={commonLabelStyle}
            unitStyle={commonUnitStyle}
          />
          <DescriptionItem
            // value={97.34}
            decimals={2}
            name="设备在线率"
            unit="%"
            valueStyle={{ ...commonValueStyle, background: '#55D355' }}
            labelStyle={commonLabelStyle}
            unitStyle={commonUnitStyle}
          />
        </div>
      </div>
    </div>
  );
};

export default MonitorInfo;
