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;
  children?: any;
}

const InfoIcon = styled.svg.attrs({
  className: 'info',
})
`
  position: absolute;
  right: 4%;
  top: 50%;
  transform: translateY(-50%);
  fill: none;
  stroke: ${Colors.lochmara};
  stroke-miterlimit: 10;
  stroke-width: 1.398px;

  .cls-1 {
    fill: none;
    stroke: ${Colors.lochmara};
    stroke-miterlimit: 10;
    stroke-width: 1.398px
  }
`;

export default React.memo(({ width, height, children }: IProps) => (
  <InfoIcon viewBox='0 0 17.397 17.398' width={width || Sizes.s3} height={height || Sizes.s3}>
      {children}
    <g transform='translate(8.699 8.699)'>
      <g transform='translate(-8 -8)'>
        <path d='M0 3.782V0' className='cls-1' transform='translate(8 7.058)' />
        <path d='M0 .935V0' className='cls-1' transform='translate(8 5.159)' />
        <circle cx='8' cy='8' r='8' className='cls-1' />
      </g>
    </g>
  </InfoIcon>
));