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

import { Button } from './Button'
import { TestIcon } from '../Icon/TestIcon'

import '../../../style-current.css'

const meta = {
  title: 'Current web/Controls/Button',
  component: Button,
  decorators: [
    (Story) => (
      <div>
        <Story />
      </div>
    ),
  ],
  parameters: {
    layout: 'centered',
  },
} satisfies Meta<typeof Button>

export default meta
type Story = StoryObj<typeof meta>

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

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

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

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

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

export const LeadingIcon: Story = {
  args: {
    children: [<TestIcon color="var(--Base-Text-Inverted)" />, 'Button'],
  },
}

export const TrailingIcon: Story = {
  args: {
    children: ['Button', <TestIcon color="var(--Base-Text-Inverted)" />],
  },
}

export const WithIcons: Story = {
  args: {
    children: [
      <TestIcon color="var(--Base-Text-Inverted)" />,
      <TestIcon color="var(--Base-Text-Inverted)" />,
      'Button',
      <TestIcon color="var(--Base-Text-Inverted)" />,
      <TestIcon color="var(--Base-Text-Inverted)" />,
    ],
  },
}