import { ScaleLinear } from 'd3-scale'
import React from 'react'
import { Rect } from 'react-native-svg'
import { colorsV2 } from '../../Colors'
import { Size } from './useFigure'

/**
 * Semi-opaque shroud, used to mask non-selected data
 */
export const Shroud: React.FC<{
  size: Size
  paddingHorizontal: number
  scaleX: ScaleLinear<number, number>
  start: number
  end: number
}> = ({ size, paddingHorizontal, scaleX, start, end }) => {
  return start != end ? (
    <Rect
      x={scaleX(start) - paddingHorizontal}
      y={0}
      width={scaleX(end - start - 1) + paddingHorizontal * 2}
      height={size.height}
      fill={colorsV2.black}
      fillOpacity={0.7}
    />
  ) : null
}