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]: any} = {
  '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])};
`;