import React from 'react';
import Container from './index';
import { DecorativePattern } from 'src/helpers';

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

const Template = args => (
  <>
    <Container maxWidth="small">
      <h6>small</h6>
      <DecorativePattern />
    </Container>

    <Container maxWidth="medium">
      <h6>medium</h6>
      <DecorativePattern />
    </Container>

    <Container maxWidth="large">
      <h6>large</h6>
      <DecorativePattern />
    </Container>

    <Container maxWidth="xlarge">
      <h6>xlarge</h6>
      <DecorativePattern />
    </Container>

    <Container {...args}>
      <h6>xxlarge (default)</h6>
      <DecorativePattern />
    </Container>

    <Container maxWidth="xxxlarge">
      <h6>xxxlarge</h6>
      <DecorativePattern />
    </Container>
  </>
);

export const Default = Template.bind({});
Default.args = {
  noPadding: false,
  maxWidth: false
};