import * as React from 'react';
import styled from 'styled-components';

import Colors from '../Colors';
import Sizes from '../Sizes';

export interface IProps {
  width?: number;
  height?: number;
  color?: string;
  degree?: number;
  css?: string;
}

const ArrowIcon = styled.svg.attrs({
  className: 'svg',
})<IProps>`
  transform: rotate(${({ degree }) => degree}deg);
`;

export default React.memo(({ width, height, color, ...props }: IProps) => (
  <ArrowIcon viewBox='0 0 32 20.42' width={width || 18} height={height || Sizes.s3} {...props}>
    <polyline
      className='link-arrow-elements'
      points='12.35 19.71 22 10.22 12.35 0.71'
      fill='none'
      stroke={color || Colors.lochmara}
      strokeMiterlimit='10'
      strokeWidth='1.601' />
    <line
      className='link-arrow-elements'
      stroke={color || Colors.lochmara}
      x1='22'
      y1='10.22'
      y2='10.22'
    />
  </ArrowIcon>
));