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;
  color?: string;
  css?: string;
}

const FinalSuccessIcon = styled.svg<IProps>`
  stroke: ${Colors.white};
  margin-bottom: 50px;
  .cls-1 {
    fill: none;
    stroke: #fff;
    stroke-miterlimit: 10;
    stroke-width: 12px;
  }
`;

export default React.memo(({width, height, color, ...props}: IProps) => (
  <FinalSuccessIcon viewBox='0 0 198.94 157.685' width={width || Sizes.s4} height={height || Sizes.s4}>
    <g id='Check-icon' transform='translate(24.058 19.239)'>
        <path id='Check' className='cls-1' d='M0,84.5l83.139,61.233L190.552,0' transform='translate(-20.5 -15.679)'/>
    </g>
  </FinalSuccessIcon>
));