import React from 'react'
import { Color, Line } from 'react-native-svg'
import { colorsV2 } from '../../Colors'
import { Size } from './useFigure'

/**
 * Set of equidistant lines to draw behind plots
 */
export const FigureGrid: React.FC<{
  size: Size
  dividersY: number
  stroke?: Color
  strokeWidth?: number
}> = ({ size, dividersY, stroke, strokeWidth }) => {
  const spaceBetweenLines = size.height / (dividersY - 1)
  return (
    <>
      {[...Array(dividersY ?? 1)].map((_, index) => (
        <Line
          key={index}
          x1={0}
          x2={size.width}
          y={size.height - spaceBetweenLines * index}
          stroke={stroke}
          strokeWidth={strokeWidth}
        />
      ))}
    </>
  )
}

FigureGrid.defaultProps = {
  stroke: colorsV2.metals.metal0,
  strokeWidth: 1,
}