import { Story } from '@storybook/react';
import React from 'react';
import Button, { ButtonProps } from '../components/Button/Button';

export default {
  title: 'Components / Button',
  component: Button,
};

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

export const Default = Template.bind({});
Default.args = {
  variant: 'default',
  type:'button'
};

export const Primary = Template.bind({});
Primary.args = {
  variant: 'primary',
  type:'button'
};

export const Secondary = Template.bind({});
Secondary.args = {
  variant: 'secondary',
};

export const Success = Template.bind({});
Success.args = {
  variant: 'success',
};

export const Accent = Template.bind({});
Accent.args = {
  variant: 'accent',
};

export const Selected = Template.bind({});
Selected.args = {
  variant: 'selected',
};
export const Type = Template.bind({});
Selected.args = {
  variant: 'success',
  type:'submit',
  title:'Type Submit'
};

export const Custom = Template.bind({});
Custom.args = {
  variant: 'custom',
  title: 'Dumpster Fire',
  rounded: false,
  size: 'lg',
  theme:
    'font-bold bg-orange-900 text-amber-100 border-2 border-amber-700 disabled:bg-orange-900/20 disabled:text-amber-700/20 disabled:border-amber-700/20 disabled:cursor-not-allowed',
  loadingText: 'Do Not Disturb...',
  leadingIcon: 'fa-solid fa-dumpster-fire',
  trailingIcon: 'fa-solid fa-dumpster-fire',
  loadingIcon: 'ml-1 fa-solid fa-poo fa-bounce',
};