import styled from 'styled-components';

export const SVG = styled.svg`
  position: absolute;
  cursor: pointer;
  z-index: 10;
  outline: none;
`;

export const Rect = styled.rect`
  cursor: move;
  fill: #ffffff;
  fill-opacity: 0;
  stroke-width: 3;
`;

const arrowDirection: { [index: string]: string } = {
  'top-right': 'ne-resize',
  top: 'n-resize',
  'top-left': 'nw-resize',
  left: 'w-resize',
  'bottom-left': 'sw-resize',
  bottom: 's-resize',
  'bottom-right': 'se-resize',
  right: 'e-resize',
};

export const Circle = styled('circle')<{ direction: string }>`
  cursor: ${(props) => arrowDirection[props.direction]};
`;