import React from 'react';
import { storiesOf } from '@storybook/react';

import PercentageBar from './index';

storiesOf('PercentageBar')
  .add('should render nothing', () => (
    <div style={{ width: '500px', padding: "50px" }} >
      <PercentageBar />
    </div>
  ))
  .add('should render percentage bar', () => (
    <div style={{ width: '500px', padding: "50px" }} >
      <PercentageBar paid={131} organic={1023} />
    </div>
  ))
  .add('should render percentage small paid', () => (
    <div style={{ width: '500px', padding: "50px" }} >
      <PercentageBar paid={10} organic={2000} />
    </div>
  ))
  .add('should render percentage bar only paid', () => (
    <div style={{ width: '500px', padding: "50px" }} >
      <PercentageBar paid={1999} organic={0} />
    </div>
  ))
  .add('should render percentage bar only organic', () => (
    <div style={{ width: '500px', padding: "50px" }} >
      <PercentageBar paid={0} organic={1999} />
    </div>
  ));