import * as React from 'react';
import { select, number, boolean } from '@storybook/addon-knobs';
import { Text } from '../../Text';
import Columns from '.';
import Stack from '../Stack';

export default {
  title: 'Components|Layout/Columns',
  component: Columns,
};

export const index = () => (
  <Columns
    gap={select(
      'Gap',
      {
        none: 'none',
        gutter: 'gutter',
        xxsmall: 'xxsmall',
        xsmall: 'xsmall',
        small: 'small',
        medium: 'medium',
        large: 'large',
      },
      'gutter',
    )}
    equalColumns={boolean('Equal Columns', true)}
  >
    {Array.from({ length: number('Columns', 2) }, (_, i) => (
      <Stack>
        <Text>Lorem ipsum dolor</Text>
        <Text>sit amet consectetur {'adipisicing elit'.substr(0, i * 100)}</Text>
        <Text>adipisicing elit</Text>
      </Stack>
    ))}
  </Columns>
);