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

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

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

export default React.memo(({ width, height, color, ...props }: IProps) => (
  <InvalidityIcon xmlns='http://www.w3.org/2000/svg' width={width || 100} height={height || 80} viewBox='0 0 40 45' {...props}>
    <g transform='translate(-12.6 -12.5)'>
      <ellipse className='icon' cx='4.547' cy='4.547' rx='4.547' ry='4.547' transform='translate(26.092 13.5)'/>
      <path className='icon' d='M30.64 22.594v14.791h9.082l9.744 9.757M30.64 30.377h9.082M37.56 42.52a11.98 11.98 0 1 1-11.98-11.98'/>
    </g>
  </InvalidityIcon>
));