import { ComponentStory, ComponentMeta } from '@storybook/react';
import { Col, Container, Row } from 'components/layout';
import { Text } from 'components';
import { Icon, icons, IconName } from './Icon';

type ComponentType = typeof Icon;

const options = Object.keys(icons) as IconName[];
export default {
  title: 'Design System/Icon',
  component: Icon,
  argTypes: {
    name: {
      type: 'string',
      name: 'name',
      options,
      control: { type: 'select' },
    },
  },
} as ComponentMeta<ComponentType>;

export const IconList: ComponentStory<ComponentType> = () => {
  return (
    <Row flexWrap="wrap">
      {options.map((name) => (
        <Col alignItems="center" justifyContent="center" my={20} mx={10} alignContent="center">
          <Icon name={name} width={25} height={25} colorVariant="body" />
          <Text mt="2xs" variant="caption" color="title">
            {name}
          </Text>
        </Col>
      ))}
    </Row>
  );
};
export const Interactive: ComponentStory<ComponentType> = (args) => {
  const { name } = args;
  return (
    <Container>
      <Icon name={name} />
    </Container>
  );
};
Interactive.args = {
  name: 'account',
};