// @flow
import React from 'react';
import type { Node } from 'react';
import { storiesOf } from '@storybook/react';
import { SideBar } from './index';
import { withDocs } from '../../../.storybook/with-docs';
import docs from './SIDE_BAR.mkd';
import { Box } from '../../primitives';

const Decorator = ({ children }: { children: Node }) => (
  <Box
    style={{ height: '500px' }}
    stacked="column"
    justify="center"
    align="center"
  >
    {children}
  </Box>
);

storiesOf('One-off/SideBar', module).add(
  'normal',
  withDocs(docs)(() => (
    <Decorator>
      <SideBar
        title="Best side bar ever"
        text={[
          'Some pretty long but still slight and incredibly useful text to search some purpose or something.',
          'Whoa look at me go, a second paragraph!',
        ]}
      />
    </Decorator>
  )),
);
