/**
 * native chart 内核：网格线（横向 / 纵向）
 *
 * dashboard 风格：默认虚线 `3 3`，与 Recharts CartesianGrid 一致
 */
export default function Grid({
  plot,
  yTicks = [],
  xTicks = [],
  showHorizontal = true,
  showVertical = false,
  color = 'var(--color-border-chart-grid, #E4E7EC)',
  strokeDasharray = '3 3',
}) {
  return (
    <g className="native-chart__grid" pointerEvents="none">
      {showHorizontal && yTicks.map((t, i) => (
        <line
          key={`h${i}`}
          x1={plot.x}
          x2={plot.x + plot.w}
          y1={t.y}
          y2={t.y}
          stroke={color}
          strokeWidth={1}
          strokeDasharray={strokeDasharray}
          shapeRendering="crispEdges"
        />
      ))}
      {showVertical && xTicks.map((t, i) => (
        <line
          key={`v${i}`}
          x1={t.x}
          x2={t.x}
          y1={plot.y}
          y2={plot.y + plot.h}
          stroke={color}
          strokeWidth={1}
          strokeDasharray={strokeDasharray}
          shapeRendering="crispEdges"
        />
      ))}
    </g>
  );
}
