import { useState } from 'react';
import type { Meta, StoryObj } from '@storybook/react';
import RadioGroup, { RadioGroupProps } from './RadioGroup';

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

const Template = (args: RadioGroupProps) => {
  const [selectedValue, setSelectedValue] = useState(args?.selectedValue);

  const handleChange = (value: string) => {
    setSelectedValue(value);
  };

  return (
    <RadioGroup
      {...args}
      selectedValue={selectedValue}
      onChange={handleChange}
    />
  );
};

const defaultArgs = {
  name: 'gender',
  options: [
    { label: 'Male', value: 'male' },
    { label: 'Female', value: 'female' },
    { label: 'Other', value: 'other' },
  ],
  className: 'custom-radio-class',
};

export const Default: StoryObj<RadioGroupProps> = {
  render: Template,
  args: {
    ...defaultArgs,
    selectedValue: '',
  },
};

export const PrimaryVariant: StoryObj<RadioGroupProps> = {
  render: Template,
  args: {
    ...defaultArgs,
    selectedValue: 'male',
    variant: 'primary',
  },
};

export const Preselected: StoryObj<RadioGroupProps> = {
  render: Template,
  args: {
    ...defaultArgs,
    selectedValue: 'female',
    variant: 'success',
  },
};

export const DisabledOption: StoryObj<RadioGroupProps> = {
  render: Template,
  args: {
    name: 'gender',
    options: [
      { label: 'Male', value: 'male' },
      { label: 'Female', value: 'female', disabled: true },
      { label: 'Other', value: 'other' },
    ],
    selectedValue: 'other',
  },
};

export default meta;