import type { Meta, StoryFn } from '@storybook/react'
import React from 'react'

import ActionButton from '.'

type ComponentProps = React.ComponentProps<typeof ActionButton>

const meta: Meta<ComponentProps> = {
  title: 'ActionButton',
  component: ActionButton,
  parameters: {
    layout: 'centered',
    chromatic: { disableSnapshot: true },
  },
  argTypes: {
    onClick: { action: 'clicked' },
  },
}
export default meta

const Template: StoryFn<ComponentProps> = (args) => {
  return (
    <div className="p-12">
      <ActionButton {...args} />
    </div>
  )
}

export const Default: StoryFn<ComponentProps> = Template.bind({})
Default.args = {
  children: 'Default Button',
  variant: 'default',
}

export const Danger: StoryFn<ComponentProps> = Template.bind({})
Danger.args = {
  children: 'Delete',
  variant: 'danger',
}

export const Disabled: StoryFn<ComponentProps> = Template.bind({})
Disabled.args = {
  children: 'Disabled Button',
  variant: 'default',
  disabled: true,
}