import React from 'react';
import { storiesOf } from '@storybook/react';
import { checkA11y } from 'storybook-addon-a11y';
import Table, { TableRow, TableHeader } from './index';

const metrics = [
  { label: 'F.25-34', value: 68412 },
  { label: 'M.25-34', value: 63329 },
  { label: 'M.35-44', value: 35774 },
];

storiesOf('DemographicsTable')
  .addDecorator(checkA11y)
  .add('should render the row', () => (
    <div
      style={{
        width: '920px',
      }}
    >
      <TableRow metric={{ label: 'Foo bar 42', value: 45923 }} index={0} />
    </div>
  ))
  .add('should render the row with expand gender and age label', () => (
    <div
      style={{
        width: '920px',
      }}
    >
      <TableRow metric={{ label: 'F.25-34', value: 45923 }} index={0} />
    </div>
  ))
  .add('should render the header', () => (
    <div
      style={{
        width: '920px',
      }}
    >
      <TableHeader labels={['Gender and age', 'Page fans']} />
    </div>
  ))
  .add('should render the table', () => (
    <div
      style={{
        width: '920px',
      }}
    >
      <Table labels={['Gender and age', 'Page fans']} metrics={metrics} />
    </div>
  ));