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;
}

const PencilIcon = styled.svg`
  .st0 {
    fill: none;
    stroke: ${Colors.lochmara};
    stroke-miterlimit: ${Sizes.s2};
    stroke-width: 2px;
  }
`;

export default React.memo(({ width, height }: IProps) => (
  <PencilIcon viewBox='0 0 28 28' width={width || Sizes.s5} height={height || Sizes.s5}>
    <path className='st0' d='M4.3 18.2l-2.8 8.3 8.3-2.8L26.5 7 21 1.5z' />
    <path className='st0' d='M4.3 18.2l5.5 5.5' />
  </PencilIcon>
));