import React from 'react'
import styled from 'styled-components'

import * as pictograms from '../src/'

export default {
  title: 'Pictogram',
}

const Wrapper = styled.div`
  display: flex;
  flex-wrap: wrap;
`

const PictogramWrapper = styled.span`
  display: flex;
  flex-direction: column;
  padding: 1rem;

  & span {
    margin-bottom: 0.5rem;
  }
`

export const AllPictograms = () => (
  <Wrapper>
    {Object.entries(pictograms).map(([name, Pictogram], index) => (
      <PictogramWrapper key={index}>
        <span>{name}</span>
        <Pictogram height={'8rem'} />
      </PictogramWrapper>
    ))}
  </Wrapper>
)