// @flow
import React from 'react';
import type { ComponentType } from 'react';
import { withTheme } from 'styled-components';
import type { CheckIconProps } from './check-icon.proptypes';
import { getSize, getStrokeColor, getFillColor } from './check-icon.css-rules';
import type { ThemeProps } from '../../../types';

const _CheckIcon = ({
  theme,
  size = 'lg',
  inverted = false,
}: {|
  ...ThemeProps,
  ...CheckIconProps,
|}) => (
  <svg
    width={getSize({ size })}
    height={getSize({ size })}
    viewBox="0 0 51 51"
    version="1.1"
  >
    <g stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
      <g
        transform="translate(-694.000000, -202.000000)"
        stroke={getStrokeColor({ theme, inverted })}
        fill={getFillColor({ theme, inverted })}
      >
        <g transform="translate(694.000000, 202.000000)">
          <g transform="translate(0.089998, 0.089998)">
            <path
              d="M1.15500009,25.410002 C1.15500009,38.8076679 12.0132469,49.6650039 25.410002,49.6650039 C38.8076679,49.6650039 49.6650039,38.8067571 49.6650039,25.410002 C49.6650039,12.0123361 38.8067571,1.15500009 25.410002,1.15500009 C12.0123361,1.15500009 1.15500009,12.0132469 1.15500009,25.410002 Z"
              strokeWidth="2"
            />
            <polyline
              strokeWidth="4.62000036"
              points="16.1700013 25.5912264 22.2216652 32.3400025 34.6500027 18.4800014"
            />
          </g>
        </g>
      </g>
    </g>
  </svg>
);

export const CheckIcon: ComponentType<CheckIconProps> = withTheme(_CheckIcon);

CheckIcon.displayName = 'CheckIcon';
