import * as React from 'react';
import {withInfo} from '@storybook/addon-info';
import {withKnobs, select, text} from '@storybook/addon-knobs';
import {INTENT, SIZE} from './../../index';
import {storyLayout} from '../../index.stories';
import {systemIconMap} from '../../utils/storybookEnums';
import {ContentPlaceholder} from './ContentPlaceholder';

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

export const contentPlaceholder = () => {
    return (
        <ContentPlaceholder
            mainText={text('mainText', 'main Text main Text main Text')}
            mainTextColor={text('mainTextColor', 'mainTextColor')}
            subText={text('subText', 'subText subText subText')}
            subTextColor={text('subTextColor', 'subTextColor')}
            intent={select('intent', {danger: INTENT.DANGER, primary: INTENT.PRIMARY}, INTENT.PRIMARY)}
            iconName={select('name', systemIconMap(true), 'search')}
            iconSize={select('size', {middle: SIZE.MIDDLE, large: SIZE.LARGE}, SIZE.MIDDLE)}
        />
    );
};