// @flow
import React from 'react';
import { useTheme } from 'styled-components';
import type { CheckmarkProps } from './checkmark.proptypes';

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

export const Checkmark = ({
  inverted = false,
  color = 'secondary',
}: CheckmarkProps) => {
  const theme = useTheme();
  return (
    <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, color)}
            fill={getFillColor(theme, inverted, color)}
            x="0.5"
            y="0.5"
            width="21"
            height="21"
            rx="11"
          />
          <polyline
            stroke={getFontColor(theme, inverted, color)}
            strokeWidth="2"
            points="7 11.0784521 9.61976772 14 15 8"
          />
        </g>
      </g>
    </svg>
  );
};

Checkmark.displayName = 'Checkmark';
