import React from 'react';
import styled from 'styled-components';
import Icon, { IconMap } from './index';

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

const IconContainer = styled.span`
  display: inline-flex;
  border: 1px solid lightgray;
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  padding: 10px;
`;

const Item = styled.div`
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 10px;
  width: 140px;
  height: 120px;
`;

const ItemName = styled.span`
  color: black;
`;

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

const ListTemplate = args => (
  <Container>
    {Object.keys(IconMap).map(icon => (
      <Item key={icon}>
        <IconContainer>
          <Icon {...args} name={icon} />
        </IconContainer>
        <ItemName>{icon}</ItemName>
      </Item>
    ))}
  </Container>
);

export const Default = ListTemplate.bind({});

export const CustomColor = ListTemplate.bind({});
CustomColor.decorators = [story => <div style={{ color: '#4576D9' }}>{story()}</div>];

const Template = args => <Icon {...args} />;

export const ArrowNext = Template.bind({});
ArrowNext.args = {
  name: 'ArrowNext'
};