"use client";

import { GridConfig } from "@/types/report";

interface GridLayerProps {
  gridConfig: GridConfig;
  pageWidth: number;
  pageHeight: number;
}

export function GridLayer({ gridConfig, pageWidth, pageHeight }: GridLayerProps) {
  if (!gridConfig.visible) return null;

  const { cellWidth, cellHeight, columns, rows, gridColor, gridOpacity } = gridConfig;

  // SVG로 그리드 선 렌더링
  return (
    <svg className="pointer-events-none absolute inset-0" width={pageWidth} height={pageHeight} style={{ zIndex: 0 }}>
      {/* 세로 선 */}
      {Array.from({ length: columns + 1 }).map((_, i) => (
        <line
          key={`v-${i}`}
          x1={i * cellWidth}
          y1={0}
          x2={i * cellWidth}
          y2={pageHeight}
          stroke={gridColor}
          strokeOpacity={gridOpacity}
          strokeWidth={1}
        />
      ))}

      {/* 가로 선 */}
      {Array.from({ length: rows + 1 }).map((_, i) => (
        <line
          key={`h-${i}`}
          x1={0}
          y1={i * cellHeight}
          x2={pageWidth}
          y2={i * cellHeight}
          stroke={gridColor}
          strokeOpacity={gridOpacity}
          strokeWidth={1}
        />
      ))}
    </svg>
  );
}