import { Rectangle, Color, Math as CesiumMath } from "cesium";
import { Entity, RectangleGraphics } from "resium";
const points = [
  [13, -70, 30, -67], //sic_s
  [93, 29, 99, 35], //sc_tp
  [68, 48, 76, 52], //sc_ea
  [150, 60, 160, 70], //ts_ac
  [130, 20, 140, 28], //wp
  [150, 12, 175, 22], //np
  [-110, 20, -95, 35], //arn
  [10, -12, 45, -2], // af
  [80, 10, 110, 20], // io
  [-150, -10, -40, 5], //ep
  [65, -62, 90, -57], // aa
  [145, -30, 155, -20], // ea
  [165, -45, 180, -30], // nz
  [-140, -60, -110, -45], // sp
  [-70, -78, -50, -70], // wd
];
export default function RectangleLayer() {
  return points.map((p, i) => (
    <Entity
      key={`rectangle-${i}`}
      name="RectangleGraphics"
      description="RectangleGraphics!!"
    >
      <RectangleGraphics
        coordinates={Rectangle.fromDegrees(...p)}
        material={Color.PEACHPUFF.withAlpha(0.3)}
        rotation={CesiumMath.toRadians(45)}
        extrudedHeight={0}
        height={0}
        outline // height must be set for outline to display
        outlineColor={Color.YELLOW}
      />
    </Entity>
  ));
}
