import React from 'react'
import { BeakerIcon } from '@heroicons/react/solid'

import { Story, Meta } from '@storybook/react'
import { Icon, IconProps } from './Icon'

export default {
  title: 'Image and icons/Icon',
  component: Icon,
  argTypes: {
    source: {
      name: 'source',
      description: 'Controls the font size'
    },
    size: {
      name: 'size',
      description: 'Controls the icon size',
      type: { name: 'string', required: false },
      control: {
        type: 'select',
        options: ['xxs', 'xs', 'sm', 'md', 'lg', 'xl', '2xl']
      }
    },
    color: {
      name: 'color',
      description: 'Controls the icon color',
      type: { name: 'string', required: false },
      control: {
        type: 'select',
        options: ['base', 'subdued', 'negative', 'positive', 'primary']
      }
    }
  }
} as Meta

const Template: Story<IconProps> = (args: any) => {
  return <Icon {...args}></Icon>
}

export const Default = Template.bind({})
Default.args = {
  source: <BeakerIcon />
}
