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<IProps>`
  transform: rotate(${({ degree }) => degree}deg);
`;

export default React.memo(({ width, height, color, ...props }: IProps) => (
  <ArrowIcon viewBox='0 0 10.708 6.064' width={width || Sizes.s5} height={height || Sizes.s5} {...props}>
    <path d='M10.354 5.71l-5-5-5 5' fill='none' stroke={color || Colors.lochmara} strokeMiterlimit='10' strokeWidth='1.001' />
  </ArrowIcon>
));