import * as React from 'react';
import {withInfo} from '@storybook/addon-info';
import {boolean, withKnobs} from '@storybook/addon-knobs';
import {Checkbox} from './../../index';
import {storyLayout} from '../../index.stories';

// eslint-disable-next-line no-restricted-syntax
export default {
    title: 'Checkbox',
    decorators: [withInfo, withKnobs, storyLayout]
};

export const simpleCheckbox = () => {
    const [checked, setState] = React.useState(false);

    return (
        <>
            <Checkbox
                checked={boolean('checked', checked)}
                onChange={(e) => setState(e.target.checked)}
            />
        </>
    );
};