import type { Meta, StoryObj } from 'storybook-react-rsbuild';
import { Gear, Plus, Trash } from '@phosphor-icons/react';
import { IconButton } from '../components/ui';

const meta = {
  title: 'Inputs/IconButton',
  component: IconButton,
  parameters: {
    docs: {
      description: {
        component:
          'Square button for a single icon. Shares the Button variants; sizes are `sm` / default / `lg`.',
      },
    },
  },
  argTypes: {
    variant: {
      control: 'inline-radio',
      options: ['key', 'primary', 'ember', 'ghost'],
      description: 'Visual emphasis. `key` is the default neutral button.',
    },
    size: {
      control: 'inline-radio',
      options: ['sm', undefined, 'lg'],
      description: 'Button size: `sm` compact, default regular, `lg` large.',
    },
    disabled: { control: 'boolean' },
  },
} satisfies Meta<typeof IconButton>;

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

export const Playground: Story = {
  args: { variant: 'key', children: <Gear size={18} /> },
};

export const Variants: Story = {
  render: () => (
    <div style={{ display: 'flex', gap: 12 }}>
      <IconButton variant="key" aria-label="settings"><Gear size={18} /></IconButton>
      <IconButton variant="primary" aria-label="add"><Plus size={18} weight="bold" /></IconButton>
      <IconButton variant="ember" aria-label="delete"><Trash size={18} /></IconButton>
      <IconButton variant="ghost" aria-label="settings"><Gear size={18} /></IconButton>
    </div>
  ),
};

export const Sizes: Story = {
  render: () => (
    <div style={{ display: 'flex', gap: 12, alignItems: 'center' }}>
      <IconButton size="sm" variant="primary" aria-label="add"><Plus size={14} weight="bold" /></IconButton>
      <IconButton variant="primary" aria-label="add"><Plus size={18} weight="bold" /></IconButton>
      <IconButton size="lg" variant="primary" aria-label="add"><Plus size={22} weight="bold" /></IconButton>
    </div>
  ),
};