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

export interface IProps {
  width?: number;
  height?: number;
  color?: string;
  css?: string;
}

const Diseases = styled.svg<IProps>`
  fill:none;
  stroke-miterlimit: 10;
  stroke-width: 1px;
  stroke: currentColor;
  stroke-linecap:square;
`;

export default React.memo(({ width, height, color, ...props }: IProps) => (
  <Diseases xmlns='http://www.w3.org/2000/svg' width={width || 100} height={height || 80} viewBox='0 0 40 45' {...props}>
    <g transform='translate(-.108 -.108)'>
      <ellipse className='i-disease card-icon' cx='13.242' cy='13.241' rx='13.242' ry='13.241' transform='translate(7.382 7.409)'/>
      <path className='i-disease card-icon' d='M29.993 30.019l6.302 6.276m-25.027-6.29L4.55 36.737'/>
      <ellipse className='i-disease card-icon' cx='3.151' cy='3.151' rx='3.151' ry='3.151' transform='translate(35.767 35.807)'/>
      <ellipse className='i-disease card-icon' cx='3.151' cy='3.151' rx='3.151' ry='3.151' transform='translate(17.473 33.905)'/>
      <ellipse className='i-disease card-icon' cx='3.151' cy='3.151' rx='3.151' ry='3.151' transform='translate(1.524 1.427)'/>
      <ellipse className='i-disease card-icon' cx='3.151' cy='3.151' rx='3.151' ry='3.151' transform='translate(17.445 17.527)'/>
      <path className='i-disease card-icon' d='M20.637 1.108v6.315M6.921 6.921l4.333 4.374M1.108 20.678h6.26M37.433 3.842l-7.454 7.453'/>
    </g>
  </Diseases>
));