// @flow
import React from 'react';
import type { ComponentType } from 'react';
import { withTheme } from 'styled-components';
import type { ThemeProps } from '../../../types';
import type { CheckboxProps } from './checkbox.proptypes';
import { Selected, NotSelected } from './selected';

const _Checkbox = ({
  theme,
  selected = false,
  className,
  id,
}: {|
  ...CheckboxProps,
  ...ThemeProps,
|}) => (
  <svg
    width="44px"
    height="44px"
    viewBox="0 0 44 44"
    version="1.1"
    xmlns="http://www.w3.org/2000/svg"
    className={className}
    id={id}
  >
    <g stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
      {selected ? <Selected theme={theme} /> : <NotSelected theme={theme} />}
    </g>
  </svg>
);

export const Checkbox: ComponentType<CheckboxProps> = withTheme(_Checkbox);

Checkbox.displayName = 'Checkbox';
