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 TrashIcon = styled.svg`
  .st0 {
    fill: none;
    stroke: ${Colors.lochmara};
    stroke-miterlimit: ${Sizes.s2};
    stroke-width: 1px;
  }
`;

export default React.memo(({ width, height }: IProps) => (
  <TrashIcon viewBox='0 0 20 21' width={width || Sizes.s5} height={height || Sizes.s5}>
    <path className='st0' d='M2.33 3.83h14.72M3.2 3.81l1.27 14.68h10.39l1.23-14.68M7.47 8.16v4.77M9.67 8.16v4.77M11.82 8.16v4.77' />
    <path className='st0' d='M10.96 3.9V2.49H8.37V3.9' />
  </TrashIcon>
));