import Tabs from '@/components/Tabs';
import React, { useMemo, useState } from 'react';
import DistrictMap from './DistrictMap';
import EmphasisAreaMap from './EmphasisAreaMap';
import styles from './index.less';
const Map: Record<string, React.FC> = {
  '1': DistrictMap,
  '2': EmphasisAreaMap,
};

const MapContainer = () => {
  const [topKey, setTopKey] = useState('1');

  const renderMap = useMemo(() => {
    const MapComponent = Map[topKey];
    return <MapComponent />;
  }, [topKey]);

  return (
    <div className={styles.container}>
      <div className={styles.topTabsWarp}>
        <Tabs
          defaultValue="1"
          items={[
            { key: '1', label: '区（市）县' },
            { key: '2', label: '重点区域' },
          ]}
          onChange={(e) => {
            setTopKey(e);
          }}
        />
      </div>
      <div className={styles.mapContent}>{renderMap}</div>
    </div>
  );
};
export default MapContainer;
