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

const meta = {
  component: Button,
  argTypes: {
    variant: {
      control: 'select',
      options: [
        'solid-primary',
        'solid-danger',
        'outline-secondary',
        'outline-overlay',
        'ghost-secondary',
      ],
      description: 'The visual style of the button',
    },
    size: {
      control: 'radio',
      options: ['xs', 'sm', 'md', 'lg'],
      description: 'The size of the button',
    },
    isLoading: {
      control: 'boolean',
      description: 'Whether the button is in a loading state',
    },
    loadingIndicatorType: {
      control: 'radio',
      options: ['leftIcon', 'content'],
      description: 'Where to show the loading indicator',
    },
    disabled: {
      control: 'boolean',
      description: 'Whether the button is disabled',
    },
  },
} satisfies Meta<typeof Button>

export default meta
type Story = StoryObj<typeof Button>

export const Primary: Story = {
  args: {
    variant: 'solid-primary',
    children: 'Primary Button',
    size: 'md',
  },
}

export const Danger: Story = {
  args: {
    variant: 'solid-danger',
    children: 'Danger Button',
    size: 'md',
  },
}

export const OutlineSecondary: Story = {
  args: {
    variant: 'outline-secondary',
    children: 'Outline Button',
    size: 'md',
  },
}

export const GhostSecondary: Story = {
  args: {
    variant: 'ghost-secondary',
    children: 'Ghost Button',
    size: 'md',
  },
}

export const OutlineOverlay: Story = {
  args: {
    variant: 'outline-overlay',
    children: 'Overlay Button',
    size: 'md',
  },
}

export const ExtraSmall: Story = {
  args: {
    size: 'xs',
    children: 'Extra Small Button',
  },
}

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

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

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

export const Loading: Story = {
  args: {
    isLoading: true,
    children: 'Loading Button',
  },
}

export const LoadingContent: Story = {
  args: {
    isLoading: true,
    loadingIndicatorType: 'content',
    children: 'Loading Content',
  },
}

export const Disabled: Story = {
  args: {
    disabled: true,
    children: 'Disabled Button',
  },
}

export const OutlineOverlayDisabled: Story = {
  args: {
    variant: 'outline-overlay',
    disabled: true,
    children: 'Disabled Overlay',
  },
}