import type { Meta, StoryObj } from '@storybook/svelte';
import Button from './Button.svelte';

const meta = {
  title: 'UI/Button',
  component: Button,
  tags: ['autodocs'],
  parameters: {
    docs: {
      description: {
        component:
          'Primärer Aktions-Button. Varianten: primary, secondary, ghost. Größen: sm, md, large.',
      },
    },
  },
  argTypes: {
    variant: {
      control: 'select',
      options: ['primary', 'secondary', 'ghost'],
    },
    size: {
      control: 'select',
      options: ['sm', 'md', 'large'],
    },
  },
} satisfies Meta<Button>;

export default meta;
type Story = StoryObj<typeof meta>;

export const Primary: Story = {
  args: {
    label: 'Mitmachen',
    variant: 'primary',
    size: 'md',
  },
};

export const Secondary: Story = {
  args: {
    label: 'Mehr erfahren',
    variant: 'secondary',
  },
};

export const Ghost: Story = {
  args: {
    label: 'Abbrechen',
    variant: 'ghost',
  },
};

export const Small: Story = {
  args: {
    label: 'Klein',
    variant: 'primary',
    size: 'sm',
  },
};

export const Large: Story = {
  args: {
    label: 'Großer Button',
    variant: 'primary',
    size: 'large',
  },
};

export const Loading: Story = {
  args: {
    label: 'Laden',
    loading: true,
  },
};

export const Disabled: Story = {
  args: {
    label: 'Deaktiviert',
    disabled: true,
  },
};
