// @flow
import React from 'react';

import type { ThemeProps } from '../../../types';
import { getOutlineColor } from '../../../mixins/branding';

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

export const Selected = ({ theme }: ThemeProps) => (
  <g id="Group" transform="translate(11.000000, 11.000000)">
    <rect
      id="Rectangle-4"
      fill={getFillColor(theme)}
      x="0"
      y="0"
      width="22"
      height="22"
      rx="6"
    />
    <polyline
      id="Path-3"
      stroke={getFontColor(theme)}
      strokeWidth="3"
      points="5 10.1464784 9.3287618 14.4752402 17.304002 6.5"
    />
  </g>
);

export const NotSelected = ({ theme }: ThemeProps) => (
  <rect
    stroke={getOutlineColor(theme)}
    strokeWidth="1.5"
    x="11.75"
    y="11.75"
    width="20.5"
    height="20.5"
    rx="6"
  />
);
