import { Drawer } from '@/components/Map/Drawer';
import { Legend } from '@/components/Map/Legend';
import { MapAdditionalActions } from './MapAdditionalActions';
import { MapAdditionalOptions } from './MapAdditionalOptions';
import { MapViewer } from './MapViewer/MapViewer.component';
import { PluginsDrawer } from './PluginsDrawer';

export const Map = (): JSX.Element => (
  <div
    className="relative z-0 h-screen w-full overflow-hidden bg-black"
    data-testid="map-container"
  >
    <MapAdditionalOptions />
    <Drawer />
    <PluginsDrawer />
    <MapViewer />
    <Legend />
    <MapAdditionalActions />
  </div>
);