import Timeline from './Timeline';
import { orderByOptions, groupByOptions } from './Timeline';
import GridIcon from 'gridicons';

const items = [
  {
    date: new Date( 2019, 9, 28, 9, 0 ),
    icon: <GridIcon icon={ 'checkmark' } />,
    headline: 'A payment of $90.00 was successfully charged',
    body: [
      <p key={ '1' }>{ 'Fee: $2.91 ( 2.9% + $0.30 )' }</p>,
      <p key={ '2' }>{ 'Net deposit: $87.09' }</p>,
    ],
  },
  {
    date: new Date( 2019, 9, 28, 9, 32 ),
    icon: <GridIcon icon={ 'plus' } />,
    headline: '$94.16 was added to your October 29, 2019 deposit',
    body: [],
  },
  {
    date: new Date( 2019, 9, 27, 20, 9 ),
    icon: <GridIcon icon={ 'checkmark' } className={ 'is-success' } />,
    headline: 'A payment of $90.00 was successfully authorized',
    body: [],
  },
]

<Timeline
  items={ items }
  groupBy={ groupByOptions.DAY }
  orderBy={ orderByOptions.ASC }
/>