import { boolean, select, number } from '@storybook/addon-knobs';
import React from 'react';
import Icon from '.';
import { Shelf } from '../Layout/index';
import { IconNames } from '../Icon/IconMap';
import Tooltip from '../Tooltip';
import baseTheme from '../../theme/base';

export default {
  title: 'Components|Icon',
  component: Icon,
};

export const index = () => {
  const size = number('Size', 20);
  const color = select(
    'Color',
    Object.fromEntries(Object.keys(baseTheme.colors).map((key) => [key, key])),
    'Mid Neutral 1',
  );
  const bordered = boolean('Bordered', false);

  return (
    <Shelf>
      {IconNames.map((name) => (
        <Tooltip content={name} position="top">
          <Icon name={name} size={size} color={color} bordered={bordered} />
        </Tooltip>
      ))}
    </Shelf>
  );
};