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 style={{ display: 'flex', flexWrap: 'wrap', gap: '1.5rem' }}>
          {Object.keys(Icon).map(iconName => {
            // @ts-expect-error
            const Cmp = Icon[iconName];
            const cmpString = `<Icon.${iconName} />`;
            return (
              <div
                className="copy-icon-button"
                style={{ width: '9rem', height: '9rem', textAlign: 'center', cursor: 'pointer' }}
                onClick={() => {
                  const type = 'text/plain';
                  const blob = new Blob([cmpString], { type });
                  navigator.clipboard.write([new ClipboardItem({ [type]: blob })]);
                }}
              >
                <Card title={cmpString}>
                  <Cmp width={44} height={44} />
                </Card>
                <div style={{ marginTop: '0.5rem', fontSize: '0.75rem', lineHeight: '1rem', whiteSpace: 'nowrap' }}>
                  {cmpString}
                </div>
              </div>
            );
          })}
        </div>
      </div>
    );
  },
};
