import { Entity, PointGraphics, Viewer } from "resium";
import styles from "./index.module.less";
import { Cartesian3, Color } from "cesium";
import Picker from "./Picker";
import HeadingPitchRoll from "./HeadingPitchRoll";

function MapLayout({ children, className, ...rest }) {
  return (
    <Viewer
      className={`${styles.cesiumContainer} ${className}`}
      full
      homeButton={false}
      sceneModePicker={false}
      navigationHelpButton={false}
      shouldAnimate={false}
      infoBox={false}
      timeline={false}
      fullscreenButton={false}
      geocoder={false}
      baseLayerPicker={false}
      animation={false}
      selectionIndicator={false}
    >
      <Entity position={Cartesian3.fromDegreesArray([0, 90])}>
        <PointGraphics color={Color.SKYBLUE} pixelSize={10} />
      </Entity>
      <Picker />
      {/* <HeadingPitchRoll /> */}
      {children}
    </Viewer>
  );
}

export default MapLayout;