import { Flex } from 'antd';
import React, { useState } from 'react';
import AreaCQI from './AreaCQI';
import styles from './index.less';
import SidebarMenu from './SidebarMenu';
import UrbanProblem from './UrbanProblem';

/** @name 重点区域 */
const KeyAreaDetail: React.FC = () => {
  const [active, setActive] = useState(0);

  return (
    <Flex className={styles.container} gap={8}>
      <SidebarMenu
        menuClickHandle={function (params: any): void {
          setActive(params);
        }}
        active={active}
      ></SidebarMenu>
      {active === 0 && <AreaCQI></AreaCQI>}
      {active === 1 && <UrbanProblem></UrbanProblem>}
    </Flex>
  );
};

export default KeyAreaDetail;
