import React from 'react';
import styled from 'styled-components';
import TrustedBy from './index';
import KPI from '../KPI';
import Grid from '../../Layout/Grid';
import data from './data.json';

export default {
  title: 'Core/TrustedBy',
  component: TrustedBy
};

const WaveWrapper = styled.div`
  padding: 300px 0 140px;
`;

const Template = args =>
  args.withWaves ? (
    <WaveWrapper>
      <TrustedBy {...args} />
    </WaveWrapper>
  ) : (
    <TrustedBy {...args} />
  );

export const Default = Template.bind({});
Default.args = {
  withWaves: false,
  title: 'You are in good company',
  partners: data
};

export const WithKPI = Template.bind({});
WithKPI.args = {
  withWaves: false,
  title: 'You are in good company',
  partners: data,
  children: (
    <Grid>
      <KPI value="5+ Billions" label="Consents proof" />
      <KPI value="50K+" label="Website" />
    </Grid>
  )
};

export const WithWaves = Template.bind({});
WithWaves.args = {
  withWaves: true,
  title: 'You are in good company',
  partners: data,
  children: (
    <Grid>
      <KPI value="5+ Billions" label="Consents proof" />
      <KPI value="50K+" label="Website" />
    </Grid>
  )
};