import React, { FC } from "react";
import { Icon } from "venice-ui";
import { Colors } from "../../untils/Theme";
import {
  NavigatorController,
  NavigatorElement,
  NavigatorWrapper,
  ZoomWrapper,
} from "./NavigatorComponents";
interface IMapNAvigator {
  handleMove: (direction: string) => void;
}
export const MapNavigator: FC<IMapNAvigator> = ({
  handleMove,
}: IMapNAvigator) => {
 

  return (
    <>
      <ZoomWrapper>
      </ZoomWrapper>
      <NavigatorWrapper>
        <NavigatorElement>
          <NavigatorController>
            <Icon
              name="forward"
              onClick={() => handleMove("N")}
              color={Colors.white}
              hoverColor={Colors.seaBlue}
              hoverBackground="transparent"
            />
          </NavigatorController>

          <NavigatorController>
            <Icon
              name="back"
              onClick={() => handleMove("W")}
              color={Colors.white}
              hoverColor={Colors.seaBlue}
              hoverBackground="transparent"
            />
          </NavigatorController>
          <NavigatorController>
            <Icon
              name="forward"
              onClick={() => handleMove("E")}
              color={Colors.white}
              hoverColor={Colors.seaBlue}
              hoverBackground="transparent"
            />
          </NavigatorController>

          <NavigatorController>
            <Icon
              name="back"
              onClick={() => handleMove("S")}
              color={Colors.white}
              hoverColor={Colors.seaBlue}
              hoverBackground="transparent"
            />
          </NavigatorController>
        </NavigatorElement>
      </NavigatorWrapper>
    </>
  );
};