import { BUTTON_SIZE_MAP, BUTTON_VARIANT_MAP } from './button'
import type { Meta, StoryObj } from '@storybook/react'
import ButtonComposition from './button.composition'

// More on how to set up stories at: https://storybook.js.org/docs/7.0/react/writing-stories/introduction
const meta = {
  title: 'Button',
  component: ButtonComposition,
  tags: ['autodocs'],
  argTypes: {
    variant: {
      control: 'select',
      options: Object.keys(BUTTON_VARIANT_MAP),
    },
    size: {
      control: 'select',
      options: Object.keys(BUTTON_SIZE_MAP),
    },
  },
} satisfies Meta<typeof ButtonComposition>

export default meta
type Story = StoryObj<typeof meta>

// More on writing stories with args: https://storybook.js.org/docs/7.0/react/writing-stories/args
export const Primary: Story = {
  args: {
    label: 'Primary',
    variant: 'default',
    size: 'sm',
  },
}

export const Destructive: Story = {
  args: {
    label: 'destructive',
    variant: 'destructive',
    size: 'lg',
  },
}
export const Outline: Story = {
  args: {
    label: 'outline',
    variant: 'outline',
    size: 'lg',
  },
}
export const Subtle: Story = {
  args: {
    label: 'subtle',
    // @ts-ignore
    variant: 'subtle',
    size: 'lg',
  },
}
export const Ghost: Story = {
  args: {
    label: 'ghost',
    variant: 'ghost',
    size: 'lg',
  },
}
export const Link: Story = {
  args: {
    label: 'link',
    variant: 'link',
    size: 'lg',
  },
}
