import type { StoryObj, Meta } from '@storybook/react'
import { Button, ButtonProps, Text } from '@vinioliver-ignite-ui/react'
import { ArrowRight } from 'phosphor-react'

export default {
    title: 'Form/Button',
    component: Button,
    args:{
        children: 'Send',
        variant: 'primary',
        size: 'md',
        disabled: false,
    },
    argTypes: {
        variant: {
            options: ['primary', 'secondary', 'tertiary'],
            control: {
                type: 'inline-radio',
            },
        },
        size:{
            options: ['sm', 'md'],
            control: {
                type: 'inline-radio',
            },
        },
        disabled:{
            control: {
                type: 'boolean',
            },
        },
        onClick: {
            action: 'click',
        },
    },
} as Meta<ButtonProps>

export const Primary: StoryObj<ButtonProps> ={
    args: {
        size: 'md',
    },
}

export const Secondary: StoryObj<ButtonProps> ={
    args: {
        variant: 'secondary',
        children: 'Create New',
    },
}

export const Tertiary: StoryObj<ButtonProps> ={
    args: {
        variant: 'tertiary',
        children: 'Cancel',
    },
}

export const Small: StoryObj<ButtonProps> ={
    args: {
        size: 'sm',
    },
}

export const Disabled: StoryObj<ButtonProps> ={
    args: {
        disabled: true,
    },
}

export const WithIcon: StoryObj<ButtonProps> ={
    args: {
        children: (
            <>
                Próximo passo
                <ArrowRight weight='bold'/>
            </>
        )
    },
}