import { StyledLabel, StyledCheckbox } from './styled-checkbox';
import * as React from 'react';

interface Props {
    label: React.ReactNode;
    name: string;
    checked: boolean;
    onChange?: (e: {target: { value: string, name: string}}) => void;
    disabled?: boolean;
    styleLabel?: React.CSSProperties;
}

const Checkbox = (props: Props) => (
    <div>
        <StyledCheckbox
            type='checkbox'
            checked={props.checked}
            id={props.name}
            name={props.name}
            onChange={props.onChange}
            disabled={props.disabled}
        />
        <StyledLabel
            style={props.styleLabel}
            htmlFor={props.name}
        >
            {props.label}
        </StyledLabel>
    </div>
)

export default Checkbox;