import { Background, BackgroundVariant } from "@xyflow/react";

export const CANVAS_GRID_SIZE = 18;

export type CanvasGridVisibility = {
  lines: boolean;
  dots: boolean;
};

type CanvasGridBackgroundProps = {
  visibility: CanvasGridVisibility;
};

export function CanvasGridBackground({
  visibility,
}: CanvasGridBackgroundProps) {
  return (
    <>
      {visibility.lines ? (
        <Background
          color="#d6e0ea"
          gap={CANVAS_GRID_SIZE * 5}
          id="major-grid-lines"
          lineWidth={1}
          variant={BackgroundVariant.Lines}
        />
      ) : null}
      {visibility.dots ? (
        <Background
          color="#c4d0dd"
          gap={CANVAS_GRID_SIZE}
          id="minor-grid-dots"
          size={1}
          variant={BackgroundVariant.Dots}
        />
      ) : null}
    </>
  );
}