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

const ManagementElement: 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: '26px',
    // marginLeft: '100px',
  };

  const valueStyle = {
    ...commonValueStyle,
    marginLeft: '50px',
  };
  
  const labelStyle = {
    ...commonLabelStyle,
    marginTop: '-5px',
  }

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

  return (
    <div className={styles.container}>
      <Flex vertical gap={3}>
        <DescriptionItem
          value={1152}
          name="网格"
          unit="个"
          valueStyle={valueStyle}
          labelStyle={commonLabelStyle}
          unitStyle={commonUnitStyle}
          style={{display: 'flex', flexDirection: 'row', alignItems: 'center', justifyContent: 'flex-start'}}
          decimals={0}
          direction='horizontal'
          reverseName={true}
        />
        <Flex justify="space-between" style={{marginTop: '-10px'}}>
          <DescriptionItem
            value={9.4}
            name="资源"
            unit="万个"
            valueStyle={commonValueStyle}
            labelStyle={labelStyle}
            unitStyle={commonUnitStyle}
            decimals={2}
          />
          <DescriptionItem
            value={304.6}
            name="部件"
            unit="万个"
            valueStyle={commonValueStyle}
            labelStyle={labelStyle}
            unitStyle={commonUnitStyle}
            decimals={2}
          />
        </Flex>
      </Flex>
    </div>
  );
};

export default ManagementElement; 