import React from 'react';
import Section from './index';
import Title from '../../Typography/Title';
import List from '../../Typography/List';
import data from '../../Typography/List/data.json';

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

const Template = args => (
  <Section {...args}>
    <Title center>Join the beta.</Title>
    {args.hasList ? <List center items={data} /> : null}
  </Section>
);

export const Default = Template.bind({});
Default.args = {};

export const WithGradient = Template.bind({});
WithGradient.args = {
  hasGradient: true
};

export const WithGradientAndList = Template.bind({});
WithGradientAndList.args = {
  hasGradient: true,
  hasList: true
};

export const WithGradientAndListAndSprinkles = Template.bind({});
WithGradientAndListAndSprinkles.args = {
  hasGradient: true,
  hasSprinkles: true,
  hasList: true
};