// @flow
import React from 'react';
import { storiesOf } from '@storybook/react';
import { withInfo } from '@storybook/addon-info';
import { configDocs } from '../../../.storybook/config-docs';
import docs from './USE-BREAK-POINT.mkd';
import { useBreakPoint } from '.';

storiesOf('Hooks/useBreakPoint', module)
  .addDecorator(withInfo(configDocs(docs)))
  .add('normal', () => {
    const breakPoint = useBreakPoint();

    return (
      <div>
        {`Resize window to see the value of breakPoint change. Current value: ${breakPoint}`}
      </div>
    );
  });
