import { Schedule } from '@material-ui/icons';
import { ChannelValue, Hero } from '@brightlayer-ui/react-components';
import { number, select } from '@storybook/addon-knobs';
import { StoryFnReactReturnType } from '@storybook/react/dist/client/preview/types';
import React from 'react';

export const withChannelValueChildren = (): StoryFnReactReturnType => (
    <Hero label={'Duration'} icon={<Schedule fontSize={'inherit'} />}>
        <ChannelValue
            fontSize={20}
            value={number('ChannelValue.hours', 1)}
            units={'h'}
            unitSpace={select('unitSpace', ['show', 'hide', 'auto'], 'hide')}
        />
        <ChannelValue
            fontSize={20}
            value={number('ChannelValue.minutes', 27)}
            units={'m'}
            unitSpace={select('unitSpace', ['show', 'hide', 'auto'], 'hide')}
        />
    </Hero>
);

withChannelValueChildren.story = { name: 'with Channel Value children' };