import React from 'react';
import Card from './components/Card';
import DataElement from './components/DataElement';
import ManagementElement from './components/ManagementElement';
import PerceptionSource from './components/PerceptionSource';
import styles from './index.less';

const ResourceElements: React.FC = () => {
  const cards = [
    {
      title: '数据要素',
      children: <DataElement />,
    },
    {
      title: '管理要素',
      children: <ManagementElement />,
      popverSystem: [
        {
          name: '网格基座',
          url: 'https://10.1.174.34:13600/user/autoLogin',
        },
      ],
    },
    {
      title: '感知源',
      children: <PerceptionSource />,
      popverSystem: [
        {
          name: '物联感知平台',
          url: 'https://10.1.174.34:13200/iot-platform-screen',
        },
      ],
    },
  ];

  return (
    <div className={styles.container}>
      <div className={styles.title}>
        <span>城管资源要素</span>
      </div>
      <div className={styles.content}>
        {cards.map((card) => (
          <Card
            key={card.title}
            title={card.title}
            jumpSystem={card.popverSystem}
          >
            {card.children}
          </Card>
        ))}
      </div>
    </div>
  );
};

export default ResourceElements;
