import type { StoryObj, Meta } from '@storybook/react';
import { Icon } from '.';
import { Card } from '../card';

function Dummy() {
  return <div>🤓</div>;
}

const meta: Meta<typeof Dummy> = {
  title: 'Components/Icon',
  component: Dummy,
};

export default meta;
type Story = StoryObj<typeof Icon>;

export const AllIcons: Story = {
  name: 'All icons',
  render: () => {
    return (
      <div>
        <div className="grid grid-cols-6 justify-items-center gap-6">
          {Object.keys(Icon).map(iconName => {
            // @ts-expect-error
            const Cmp = Icon[iconName];
            const cmpString = `<Icon.${iconName} />`;
            return (
              <div
                className="cursor-pointer text-center active:scale-95"
                onClick={() => {
                  const type = 'text/plain';
                  const blob = new Blob([cmpString], { type });
                  navigator.clipboard.write([new ClipboardItem({ [type]: blob })]);
                }}
              >
                <Card title={cmpString}>
                  <Cmp width={25} height={25} />
                </Card>
                <div className="mt-2 whitespace-nowrap text-xs text-gray-700-200">{cmpString}</div>
              </div>
            );
          })}
        </div>
      </div>
    );
  },
};
