import * as React from 'react';
import * as Icons from '../icons';

export default {
  title: 'Icons/Icon',
  args: {
    className: 'fill-neutral-primary',
  },
  argTypes: {
    className: {
      name: 'Class',
      control: { type: 'select' },
      options: [
        'fill-neutral-primary',
        'fill-blue-primary',
        'fill-red-primary',
        'fill-green-primary',
        'fill-yellow-primary',
        'fill-purple-primary',
        'fill-white',
      ],
    },
  },
};

export const Icon = (args) => {
  const iconKeys = Object.keys(Icons);

  return iconKeys.map((iconKey) => {
    const IconComponent = Icons[iconKey];
    return <IconComponent {...args} key={iconKey} />;
  });
};
