import React from 'react';
import PropTypes from 'prop-types';
import { useTheme } from '@mui/material/styles';

function CustomCursor(props) {
  const theme = useTheme();

  const { x: x1 } = props.points[0];
  const { y: y2 } = props.points[1];

  if (props.activeCoordinate?.y === null) {
    return null;
  }

  return (
    <>
      <line
        x1={x1}
        y1={props.activeCoordinate?.y}
        x2={props.width + 30}
        y2={props.activeCoordinate?.y}
        stroke={theme.palette.divider}
        strokeDasharray="3 3"
      />
      <line
        x1={x1}
        y1={props.activeCoordinate?.y}
        x2={x1}
        y2={y2}
        stroke={theme.palette.divider}
        strokeDasharray="3 3"
      />
    </>
  );
}

CustomCursor.propTypes = {
  activeCoordinate: PropTypes.shape({
    x: PropTypes.number,
    y: PropTypes.number,
  }).isRequired,
  width: PropTypes.number.isRequired,
  points: PropTypes.arrayOf(
    PropTypes.shape({
      x: PropTypes.number.isRequired,
      y: PropTypes.number.isRequired,
    }),
  ).isRequired,
};

export default CustomCursor;
