import { Flex } from 'antd';
import React from 'react';
import BridgeAreaDistribution from './components/BridgeAreaDistribution';
import BridgeMaintenance from './components/BridgeMaintenance';
import BridgeTrend from './components/BridgeTrend';
import BridgeTypeDistribution from './components/BridgeTypeDistribution';
import MapBase from './components/MapBase';
import type { ViewType } from './context';
import { BridgeManageProvider } from './context';
import styles from './index.less';

interface BridgeManageProps {
  defaultViewType?: ViewType;
}

const BridgeManage: React.FC<BridgeManageProps> = ({
  defaultViewType = 'bridge',
}) => {
  return (
    <BridgeManageProvider initialViewType={defaultViewType}>
      <div className={styles.container}>
        <Flex gap={20}>
          <div className={styles.leftContent}>
            <BridgeTypeDistribution />
            <BridgeAreaDistribution />
          </div>

          <MapBase />

          <div className={styles.rightContent}>
            <BridgeMaintenance />
            <BridgeTrend />
          </div>
        </Flex>
      </div>
    </BridgeManageProvider>
  );
};

export default BridgeManage;
