import React, { useState } from 'react';
import type { Meta, StoryObj } from '@storybook/react';
import RadioButton, { RadioButtonProps } from './RadioButton';

const meta: Meta<typeof RadioButton> = {
  title: 'Components/RadioButton',
  component: RadioButton,
  parameters: { layout: 'centered' },
  tags: ['autodocs'],
};

const Template = (args: RadioButtonProps) => {
  const [selectedValue, setSelectedValue] = useState(
    args.checked ? !!args.value : ''
  );

  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    setSelectedValue(event.target.value);
  };

  return (
    <RadioButton
      {...args}
      checked={selectedValue === args.value}
      onChange={handleChange}
    />
  );
};

export const Default: StoryObj<RadioButtonProps> = {
  render: Template,
  args: {
    label: 'radio',
    name: 'radio-btn',
    value: 'default',
    checked: false,
    disabled: false,
    variant: 'primary',
  },
};

export const Checked: StoryObj<RadioButtonProps> = {
  render: Template,
  args: {
    label: 'Checked Radio Button',
    name: 'radio-btn',
    value: 'checked',
    checked: true,
    disabled: false,
    variant: 'primary',
  },
};

export const Disabled: StoryObj<RadioButtonProps> = {
  render: Template,
  args: {
    label: 'Disabled Radio Button',
    name: 'radio-btn',
    value: 'disabled',
    disabled: true,
    checked: true,
    variant: 'primary',
  },
};

export default meta;