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

import Sizes from '../Sizes';

export interface IProps {
  width?: number;
  height?: number;
}

const BoxIcon = styled.svg<IProps>`
  .cls-1 {
    fill:#1d1d1d;
  }
`;

export default React.memo(({ width, height }: IProps) => (
  <BoxIcon viewBox='0 0 41 43' width={width || Sizes.s5} height={height || Sizes.s5}>
    <g transform='translate(-16.032 .001)'>
      <g transform='translate(16.032 -.001)'>
        <g>
          <path d='M56.67 9.65L36.811.063a.641.641 0 0 0-.557 0L16.394 9.65a.641.641 0 0 0-.362.577v23.284a.641.641 0 0 0 .362.577l19.859 9.587a.641.641 0 0 0 .557 0l19.86-9.587a.641.641 0 0 0 .362-.577V10.228a.641.641 0 0 0-.362-.578zm-20.138-8.3l18.386 8.876-5.33 2.574a.635.635 0 0 0-.108-.068L31.219 3.917zm-6.76 3.289L48.131 13.5l-3.76 1.815L26.019 6.46zm18.788 10.08v6.71l-3.512 1.7v-6.71zm7.19 18.389l-18.577 8.969v-21.86l4.427-2.14a.641.641 0 1 0-.557-1.154L36.532 19.1l-1.777-.858A.641.641 0 0 0 34.2 19.4l1.693.817v21.86l-18.58-8.968V11.248l14.147 6.83a.641.641 0 0 0 .557-1.154l-13.871-6.7 6.365-3.073 19.246 9.291.009.011v7.688a.641.641 0 0 0 .919.577l4.794-2.314a.641.641 0 0 0 .362-.577V14.1l5.909-2.853v21.86z' className='cls-1' transform='translate(-16.032 .001)' />
        </g>
      </g>
      <g transform='translate(18.432 29.387)'>
        <g>
          <path d='M51.412 342.552l-2.557-1.234a.562.562 0 1 0-.489 1.012l2.557 1.234a.562.562 0 0 0 .489-1.012z' className='cls-1' transform='translate(-48.048 -341.261)' />
        </g>
      </g>
      <g transform='translate(18.435 26.435)'>
        <g>
          <path d='M53.809 308.115l-4.909-2.369a.562.562 0 0 0-.489 1.013l4.907 2.369a.562.562 0 0 0 .489-1.013z' className='cls-1' transform='translate(-48.096 -305.69)' />
        </g>
      </g>
    </g>
  </BoxIcon>
));