import React from "react";
import type { RegionLayerSpec, ViewportTransform } from "./types";

interface RegionLayerProps {
  regions?: RegionLayerSpec[];
  viewport: ViewportTransform;
}

export const RegionLayer: React.FC<RegionLayerProps> = ({ regions, viewport }) => {
  if (!regions || regions.length === 0) return null;

  return (
    <g className="region-layer">
      {regions.map((region) => {
        if (region.points.length < 3) return null;

        const screenPoints = region.points.map((p) => ({
          x: viewport.toScreenX(p.x),
          y: viewport.toScreenY(p.y),
        }));

        const pointsAttr = screenPoints.map((p) => `${p.x},${p.y}`).join(" ");

        return (
          <g key={region.id} id={`region-${region.id}`}>
            <polygon
              points={pointsAttr}
              fill={region.fill}
              stroke={region.stroke ?? "none"}
              fillOpacity={region.opacity ?? 0.12}
            />
          </g>
        );
      })}
    </g>
  );
};