import React from 'react';
import * as FeatherIcons from 'react-feather';
import { Box } from '../box/index.js';
import { Label } from '../label/index.js';
import Icon from './icon.js';
export default {
  title: 'DesignSystem/Atoms/Icon',
  argTypes: {
    icon: {
      defaultValue: 'Settings',
      description: 'CamelCased name of an icon from https://www.npmjs.com/package/react-feather',
      control: {
        type: 'select'
      },
      options: Object.keys(FeatherIcons)
    },
    size: {
      defaultValue: 48,
      control: {
        type: 'number',
        min: 16,
        max: 48,
        step: 4
      }
    },
    color: {
      defaultValue: 'black',
      control: {
        type: 'color'
      }
    },
    bg: {
      defaultValue: 'white',
      control: {
        type: 'color'
      }
    },
    rounded: {
      defaultValue: true,
      control: {
        type: 'boolean'
      }
    },
    spin: {
      defaultValue: false,
      control: {
        type: 'boolean'
      }
    }
  }
};
export const Default = props => /*#__PURE__*/React.createElement(Icon, props);
export const Icons = () => /*#__PURE__*/React.createElement(Box, {
  display: "grid",
  style: {
    gridTemplateColumns: 'repeat(10, 1fr)',
    gap: 16
  }
}, Object.keys(FeatherIcons).map(key => /*#__PURE__*/React.createElement(Box, {
  key: key,
  flex: true,
  alignItems: "center",
  flexDirection: "column"
}, /*#__PURE__*/React.createElement(Label, null, key), /*#__PURE__*/React.createElement(Icon, {
  icon: key,
  size: 24
}))));