import React from 'react';
import { storiesOf } from '@storybook/react';
import { withKnobs, boolean, text, select } from '@storybook/addon-knobs';

import { Center } from '../Center/Center';
import Label from './Label';
const stories = storiesOf('Label', module);
stories.addDecorator((story) => <Center>{story()}</Center>);
stories.addDecorator(withKnobs);
stories.add('Default Color', () => {
  const backgroundColor = text('Background Color', 'rgba(1,113,211,0.05)');
  const opacity = text('opacity level', '1');
  const size = text('content', 'Label');
  const color = select(
    'color',
    { Default: 'rgba(1,113,211,0.05)', Dark: 'darkred' },
    'default'
  );
  const props = {
    color,
    text,
    backgroundColor,
    opacity,
    size,
  };
  return <Label.BaseLabel {...props} />, { notes: 'Default color' };
});