// @flow
import React from 'react';
import type { ComponentType } from 'react';
import { withTheme } from 'styled-components';
import type { ThemeProps } from '../../../types';
import type { CheckmarkProps } from './checkmark.proptypes';

import {
  getFontColor,
  getFillColor,
  getBorderColor,
} from './checkmark.css-rules';

const _Checkmark = ({
  theme,
  inverted = false,
}: ThemeProps & CheckmarkProps) => (
  <svg
    width="22px"
    height="22px"
    viewBox="0 0 22 22"
    version="1.1"
    xmlns="http://www.w3.org/2000/svg"
  >
    <g stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
      <g>
        <rect
          stroke={getBorderColor(theme, inverted)}
          fill={getFillColor(theme, inverted)}
          x="0.5"
          y="0.5"
          width="21"
          height="21"
          rx="11"
        />
        <polyline
          stroke={getFontColor(theme, inverted)}
          strokeWidth="2"
          points="7 11.0784521 9.61976772 14 15 8"
        />
      </g>
    </g>
  </svg>
);

export const Checkmark: ComponentType<CheckmarkProps> = withTheme(_Checkmark);

Checkmark.displayName = 'Checkmark';
