import { Panel } from '../Panel'
import * as icons from '.'

export default {
  title: 'SkynetLibrary/Icons',
  decorators: [
    (Story) => (
      <div style={{ margin: 50 }}>
        <Story />
      </div>
    ),
  ],
}

export const DefaultSizeIcon = () => <icons.SkynetLogoIcon />

export const LargeIcon = () => <icons.SkynetLogoIcon size={60} />

export const AllIcons = () => {
  const sizes = [24, 32, 60]

  return (
    <>
      {Object.entries(icons).map(([iconName, IconComponent]) => (
        <Panel key={`panel-${iconName}`}>
          <pre>{iconName}</pre>

          <div style={{ padding: 10, border: '1px dashed #fafafa', display: 'flex', alignItems: 'center', gap: 50 }}>
            {sizes.map((size) => (
              <IconComponent key={`${iconName}-${size}`} size={size} />
            ))}
          </div>
        </Panel>
      ))}
    </>
  )
}