import React from "react";
import { ComponentStory, ComponentMeta } from "@storybook/react";

import { RooRadio } from "../ui-components/RooRadio";
import { RadioInfo } from "../ui-components/RooRadio/RadioInfo";
export default {
  title: "RooRadio",
  component: RooRadio,
} as ComponentMeta<typeof RooRadio>;

const Template: ComponentStory<typeof RooRadio> = (args) => {
  return <RooRadio {...args} />;
};

const InfoTemplate: ComponentStory<typeof RooRadio> = (args) => {
  return (
    <>
      <RadioInfo />
      <RooRadio checked={false} name={"Not selected"} />
      <RooRadio checked={true} name={"Selected"} />
      <RooRadio disabled={true} name={"Disabled"} />
    </>
  );
};

export const RadioDetails = InfoTemplate.bind({});

export const NotSelected = Template.bind({});
NotSelected.args = {
  checked: false,
  name: "Not selected",
};
export const Selected = Template.bind({});
Selected.args = {
  checked: true,
  name: "Selected",
};
export const Disabled = Template.bind({});
Disabled.args = {
  disabled: true,
  name: "Disabled",
};
