import React from 'react';
import { storiesOf } from '@storybook/react';
import { Icon } from '../Icon';
import { Grid } from '~/components/Grid';
import { Box } from '~/components/Box';
import { Paragraph } from '~/components/Paragraph';
import svgUrl, { ReactComponent } from '~/assets/icons/plus.svg';
import * as icons from '~/assets/icons';

storiesOf('Components|Icon', module)
  .addWithJSX('Icons', () => (
    <Grid gridTemplateColumns="repeat(7, 1fr)">
      {Object.keys(icons).map(key => {
        const Svg = (icons as { [key: string]: React.ComponentType })[key];
        return (
          <Box textAlign="center">
            <Icon Asset={Svg} />
            <Paragraph mt="s" fontSize={0}>
              {key}
            </Paragraph>
          </Box>
        );
      })}
    </Grid>
  ))
  .addWithJSX('As img element', () => <img src={svgUrl} />)
  .addWithJSX('Rotated', () => <Icon Asset={ReactComponent} rotate="45deg" />)
  .addWithJSX('Scaled', () => <Icon Asset={ReactComponent} scale={0.9} />);
