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

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

const DeathIcon = 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) => (
  <DeathIcon xmlns='http://www.w3.org/2000/svg' width={width || 100} height={height || 80} viewBox='0 0 50 45' {...props}>
    <g transform='translate(1 1)'>
      <ellipse className='icon' cx='10.245' cy='10.245' rx='10.245' ry='10.245' transform='translate(13.681)'/>
      <path className='icon' d='M40.055 41a16.591 16.591 0 1 0-32.259 0'/>
      <ellipse className='icon' cx='10.245' cy='10.245' rx='10.245' ry='10.245' transform='translate(13.681)'/>
      <path className='icon' d='M39.052 27.276a4.352 4.352 0 0 0 2.566-3.855 4.17 4.17 0 0 0 4.167-4.167 3.91 3.91 0 0 0-.043-.612 4.164 4.164 0 0 0-.44-7.345 10.916 10.916 0 0 0-9.955.451M8.677 27.276a4.353 4.353 0 0 1-2.567-3.855 4.171 4.171 0 0 1-4.167-4.167 3.911 3.911 0 0 1 .043-.612 4.169 4.169 0 0 1 .451-7.345 10.915 10.915 0 0 1 9.955.451'/>
    </g>
  </DeathIcon>
));