import React from 'react'
import { Meta } from '@storybook/react/types-6-0'
import { Story } from '@storybook/react'
import { Button,ButtonProps } from './Button'
import arrows from './arrows.svg'

export default {
  title: 'Components/Button',
  component: Button,
  argTypes: {},
} as Meta

const Template: Story<ButtonProps> = (args) => <Button {...args} />

export const Basic = Template.bind({})
Basic.args = { children:'Emails' } 

export const Disabled = Template.bind({})
Disabled.args = { children:'Phone' ,disabled:true }

export const Hovered = Template.bind({})
Hovered.parameters = { pseudo: { hover: true } }
Hovered.args = { children:'Hovered' }

export const Selected = Template.bind({})
Selected.parameters = { pseudo: { active: true } }
Selected.args = { children:'Selected' }

export const WithIcon = Template.bind({})
WithIcon.args = {
  children:'Button with Icon',
  icon:<img src={arrows}/>
}



