/*
@format
*/
import React from 'react'
import {ChakraProvider} from '@chakra-ui/react'
import {ComponentStory} from '@storybook/react'
import {ButtonWithIcon} from '../components/UIcomponents'
import {vantagePlusTheme} from '../styles/theme'
import '../styles/fonts.css'
import logo from '../assets/mocks/images/pg_logo.png'

export default {
  title: 'VantagePlus/ButtonWithIcon',
  component: ButtonWithIcon
}
const imgIcon = <img src={logo} width="50px" />
const Template: ComponentStory<typeof ButtonWithIcon> = args => (
  <ChakraProvider theme={vantagePlusTheme}>
    <ButtonWithIcon {...args}>Button Text</ButtonWithIcon>
  </ChakraProvider>
)

export const Button = Template.bind({})
// // More on args: https://storybook.js.org/docs/react/writing-stories/args
Button.args = {
  icon: imgIcon,
  iconPosition: 'left',
  size: 'lg'
}