import { Line } from '@visx/shape';
import { DEFAULT_AREA_COLOR } from '../config';

interface VerticalLineProps {
  points: number[];
  height: number;
  offsetX: number;
  color?: string;
  radius?: number;
}

export const VerticalLine = ({
  points,
  height,
  offsetX,
  color = DEFAULT_AREA_COLOR,
  radius = 4,
}: VerticalLineProps) => {
  return (
    <g style={{ pointerEvents: 'none' }}>
      <Line
        from={{ x: offsetX, y: 0 }}
        to={{ x: offsetX, y: height }}
        stroke={color}
        strokeWidth={1}
      />
      {points?.map((posY, i) => {
        return (
          <circle
            cx={offsetX}
            cy={posY}
            r={radius}
            fill={color}
            stroke="white"
            strokeWidth={2}
            key={i}
          />
        );
      })}
    </g>
  );
};