import React, { CSSProperties } from "react";
import { CursorProps } from "../types/renderers";

const placeholderStyle = {
  display: "flex",
  alignItems: "center",
  zIndex: 1,
};

const lineStyle = {
  flex: 1,
  height: "2px",
  background: "#4B91E2",
  borderRadius: "1px",
};

const circleStyle = {
  width: "4px",
  height: "4px",
  boxShadow: "0 0 0 3px #4B91E2",
  borderRadius: "50%",
};

export const DefaultCursor = React.memo(function DefaultCursor({
  top,
  left,
  indent,
}: CursorProps) {
  const style: CSSProperties = {
    position: "absolute",
    pointerEvents: "none",
    top: top - 2 + "px",
    left: left + "px",
    right: indent + "px",
  };
  return (
    <div style={{ ...placeholderStyle, ...style }}>
      <div style={{ ...circleStyle }}></div>
      <div style={{ ...lineStyle }}></div>
    </div>
  );
});