import { useState } from 'react';
import { RadioButton } from './RadioButton';

export default {
  title: 'Inputs/RadioButton',
  component: RadioButton,
  tags: ['autodocs'],
};

export const Default = {
  render: () => {
    const [selected, setSelected] = useState('option1');
    return (
      <div className="space-y-2">
        <RadioButton
          name="options"
          value="option1"
          label="Option 1"
          checked={selected === 'option1'}
          onChange={(e) => setSelected(e.target.value)}
        />
        <RadioButton
          name="options"
          value="option2"
          label="Option 2"
          checked={selected === 'option2'}
          onChange={(e) => setSelected(e.target.value)}
        />
        <RadioButton
          name="options"
          value="option3"
          label="Option 3"
          checked={selected === 'option3'}
          onChange={(e) => setSelected(e.target.value)}
        />
      </div>
    );
  },
};

export const Single = {
  args: {
    name: 'single',
    value: 'value1',
    label: 'Single Radio Button',
    checked: true,
  },
};

export const Disabled = {
  args: {
    name: 'disabled',
    value: 'value1',
    label: 'Disabled Radio Button',
    checked: false,
    disabled: true,
  },
};

