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

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

export const labelValue = () => {
    return (
        <LabelValue
            label={text('label', 'ReactNode could be here')}
            value={text('value', 'ReactNode could be here')}
            isValueItalic={boolean('isValueItalic', false)}
            hasColon={boolean('hasColon', false)}
            hasAsterisk={boolean('hasAsterisk', false)}
            labelCanCollapsed={boolean('labelCanCollapsed', true)}
            valueCanCollapsed={boolean('valueCanCollapsed', true)}
            type={select('type', ['value', 'info', 'primary'], 'info')}
            isSpaceBetween={boolean('isSpaceBetween', false)}
            labelAlign={select('labelAlign', ['left', 'center', 'right'], 'left')}
            labelWeight={number('labelWeight', 600)}
            isWhiteColor={boolean('isWhiteColor', false)}
            isWrap={boolean('isWrap', false)}
        />
    );
};