import { Meta, StoryObj } from '@storybook/react';
import React from 'react';
import classes from '../../../.storybook/static/css/icons.scss';
import { Icons } from './Icons';
import { IconName } from './Icons.models';

const meta: Meta = {
  title: 'Other Components/Icons',
  parameters: {
    controls: { hideNoControlsWarning: true },
  },
};
export default meta;

const cases = [
  'Default',
  ...Object.keys(IconName).filter((i) => isNaN(Number(i))),
];

export const All: StoryObj = {
  render: () => {
    return (
      <div className={classes.container}>
        {cases.map((i: any) => (
          <div key={i}>
            <Icons icon={i !== 'Default' ? (IconName[i] as any) : undefined} />
            <p>{i}</p>
          </div>
        ))}
      </div>
    );
  },
  parameters: {
    docs: {
      description: {
        story: `These are reusable icons that can be used by importing the <Icons /> component and the IconName enum.
      To chose a specific icon, use it's enum value as the 'icon' prop value. Ex. <Icons icon={IconName.Undo} />
      If no icon type is selected, an empty placeholder will be rendered.
      The images themselves are inline SVGs. They scale with any resolution.
      An optional 'className' prop is also available. This className should be used for targeting a specific icon via css.
      `,
      },
    },
  },
};
