import type { Meta, StoryObj } from 'storybook-react-rsbuild';
import { Button } from '../components/ui';

const meta = {
  title: 'Inputs/Button',
  component: Button,
  parameters: {
    docs: {
      description: {
        component:
          'Tactile push button. Four variants and an optional small size; everything else is a native `<button>`, so all standard button props pass through.',
      },
    },
  },
  argTypes: {
    variant: {
      control: 'inline-radio',
      options: ['key', 'primary', 'ember', 'ghost'],
      description: 'Visual emphasis. `key` is the default neutral button.',
    },
    size: {
      control: 'inline-radio',
      options: [undefined, 'sm'],
      description: 'Omit for default; `sm` for the compact size.',
    },
    iconOnly: { control: 'boolean', description: 'Square padding for a single glyph.' },
    disabled: { control: 'boolean' },
    children: { control: 'text' },
    className: { control: 'text' },
  },
  args: { children: 'Button', variant: 'key' },
} satisfies Meta<typeof Button>;

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

export const Playground: Story = {};

export const Variants: Story = {
  render: () => (
    <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap' }}>
      <Button variant="key">Key</Button>
      <Button variant="primary">Primary</Button>
      <Button variant="ember">Ember</Button>
      <Button variant="ghost">Ghost</Button>
    </div>
  ),
};

export const Sizes: Story = {
  render: () => (
    <div style={{ display: 'flex', gap: 12, alignItems: 'center' }}>
      <Button variant="primary">Default</Button>
      <Button variant="primary" size="sm">
        Small
      </Button>
    </div>
  ),
};

export const Disabled: Story = {
  args: { disabled: true, variant: 'primary', children: 'Disabled' },
};