import React from 'react';
import { storiesOf } from '@storybook/react';
import { checkA11y } from 'storybook-addon-a11y';
import { ReportsStore } from '@bufferapp/analyze-decorators';
import StoriesSummaryTable from './index';
import mockStories from '../../mocks';

storiesOf('StoriesSummaryTable')
  .addDecorator(checkA11y)
  .addDecorator(ReportsStore)
  .add('should render the stories summary table', () => (
    <div
      style={{
        width: '750px',
      }}
    >
      <StoriesSummaryTable
        metrics={mockStories}
      />
    </div>
  ))
  .add('should render a loading state', () => (
    <div
      style={{
        width: '750px',
      }}
    >
      <StoriesSummaryTable loading metrics={[]} />
    </div>
  ))
  .add('should render a "no data" state', () => (
    <div
      style={{
        width: '750px',
      }}
    >
      <StoriesSummaryTable metrics={[]} />
    </div>
  ));