import * as React from 'react';
import { CheckBox, Label } from './Checkbox.styled';

export interface IProps {
  checked?: boolean;
  value?: string;
  name?: string;
  autoFocus?: any;
  disabled?: boolean;
  required?: boolean;
  onChange?: (event?: any) => void;
  id: string;
  label: string;
  css?: string;
}

export default React.memo(({ id, label, ...props }: IProps) => (
    <React.Fragment>
      <CheckBox id={id} {...props} />
      <Label htmlFor={id}>
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 20" className="check">
          <polyline points="1.5 11.3 10.7 18 22.5 2"></polyline>
        </svg>
        {label}
      </Label>
    </React.Fragment>
  )
);