/* eslint-disable no-magic-numbers */
import { Drawer } from '@/components/Map/Drawer';
import { Legend } from '@/components/Map/Legend';
import { MapViewer } from '@/components/Map/MapViewer';
import { MapAdditionalActions } from './MapAdditionalActions';
import { MapAdditionalOptions } from './MapAdditionalOptions';
import { PluginsDrawer } from './PluginsDrawer';

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