import { select } from '@storybook/addon-knobs';
import * as React from 'react';
import Box from '.';
import { Text } from '../../Text/index';
import baseTheme from '../../../theme/base';

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

export const index = () => (
  <Box
    p={select(
      'Padding',
      {
        none: 'none',
        xsmall: 'xsmall',
        small: 'small',
        medium: 'medium',
        large: 'large',
      },
      'small',
    )}
    bg={select(
      'Background',
      Object.fromEntries(Object.keys(baseTheme.colors).map((key) => [key, key])),
      'Light Neutral 2',
    )}
  >
    <Text>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime, accusantium minus voluptatum
      doloremque officia aliquid reiciendis ab corrupti amet enim nisi ipsam, perferendis culpa ut
      voluptatibus aperiam neque esse iste!
    </Text>
  </Box>
);