import { useState } from "react";
import { ComponentStory } from "@storybook/react";
import { Radio } from "./Radio";
import { StoryLayout } from "../../../.storybook/StoryComponents";
import { RadioDocs } from "./RadioDocs";
import React from "react";

export default {
  title: "Atoms/Radio",
  component: Radio,
  args: {
    disabled: false,
    vertical: false,
  },
  parameters: {
    docs: {
      page: RadioDocs,
    },
  },
};

const options = [
  { label: "First", value: "1" },
  { label: "Second", value: "2" },
];

export const Basic: ComponentStory<typeof Radio> = ({ ...rest }) => {
  const [radioState, changeRadioState] = useState("2");

  return (
    <StoryLayout>
      <Radio
        {...rest}
        options={options}
        name="first"
        data-component-id="test-id"
        onChange={e => {
          changeRadioState(e.target.value);
        }}
        value={radioState}
      />
    </StoryLayout>
  );
};

Basic.parameters = {
  docs: {
    storyDescription: "Базовый пример использования компонента",
  },
};