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

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

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

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