import React from 'react'
import { G, Line } from 'react-native-svg'

import { colors } from '../../../Colors'
import { Size } from '../useFigure'
import { AxisTicks } from './Axis'

const strokeWidth = 1

export function gridPadding(hasGrid?: boolean) {
  return hasGrid ? strokeWidth / 2 : 0
}

export const Grid: React.FC<{
  translateX: number
  size: Size
  ticks: AxisTicks
}> = ({ translateX, size, ticks }) => (
  <G translateX={translateX}>
    {ticks.map((line, index) => (
      <Line
        key={index}
        x1={0}
        x2={size.width}
        y={line[1]}
        stroke={colors.metals.metal1}
        strokeWidth={strokeWidth}
      />
    ))}
  </G>
)