import type { Meta, StoryObj } from '@storybook/react-vite';

import { Button } from './Button';

// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
const meta: Meta<typeof Button> = {
  title: 'UI kit/Button',
  component: Button,
  tags: ['autodocs'],
};
export default meta;
type Story = StoryObj<typeof Button>;

// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
export const Default: Story = {
  // More on args: https://storybook.js.org/docs/react/writing-stories/args
  args: {
    children: 'Button',
  },
};

/**
 * All button variants in disabled state look same.
 */
export const Disabled: Story = {
  args: {
    children: 'Button',
    disabled: true,
  },
};

/**
 * All button variants in loading state look same.
 */
export const Loading: Story = {
  args: {
    children: 'Button',
    isLoading: true,
  },
};

export const Primary: Story = {
  args: {
    children: 'Button',
    variant: 'primary',
  },
};

export const Secondary: Story = {
  args: {
    children: 'Button',
    variant: 'secondary',
  },
};

export const Action: Story = {
  args: {
    children: 'Button',
    variant: 'action',
  },
};

export const Destructive: Story = {
  args: {
    children: 'Button',
    variant: 'destructive',
  },
};

export const Small: Story = {
  args: {
    children: 'Button',
    size: 'sm',
  },
};

export const Medium: Story = {
  args: {
    children: 'Button',
    size: 'md',
  },
};

export const Large: Story = {
  args: {
    children: 'Button',
    size: 'lg',
  },
};

export const IconLeft: Story = {
  args: {
    children: 'Button',
    iconLeft: 'shp-arrow-down',
  },
};

export const IconRight: Story = {
  args: {
    children: 'Button',
    iconRight: 'shp-calendar',
  },
};

export const IconBoth: Story = {
  args: {
    children: 'Button',
    iconLeft: 'shp-comment',
    iconRight: 'shp-cart-full',
  },
};

export const IconLeftMedium: Story = {
  args: {
    children: 'Button',
    iconLeft: 'shp-arrow-down',
    size: 'md',
  },
};

export const IconRightMedium: Story = {
  args: {
    children: 'Button',
    iconRight: 'shp-calendar',
    size: 'md',
  },
};

export const IconBothMedium: Story = {
  args: {
    children: 'Button',
    iconLeft: 'shp-comment',
    iconRight: 'shp-cart-full',
    size: 'md',
  },
};

export const IconBothLarge: Story = {
  args: {
    children: 'Button',
    iconLeft: 'shp-comment',
    iconRight: 'shp-cart-full',
    size: 'lg',
  },
};