import Radio from "../components/Radio";
import { Meta, Story, ComponentStory, ComponentMeta } from "@storybook/react";
import React, { useState } from "react";
import { ReactComponent as Checkmark } from "assets/svg/check.svg";
import { boolean } from "yup/lib/locale";

export default {
  title: "Radio",
  component: Radio,
  // More on argTypes: https://storybook.js.org/docs/react/api/argtypes
  argTypes: {
    checked: {
      type: "boolean",
    },
    children: {
      type: "string",
      defaultValue: "Use light theme",
    },
    className: {
      type: "string",
      defaultValue: "mt-4 ml-4",
    },
    disabled: {
      type: "boolean",
      defaultValue: "false",
    },
  },
} as ComponentMeta<typeof Radio>;

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

export const Checked = Template.bind({});
Checked.args = {
  checked: true,
  children: "This is a custom Radio",
};

export const Unchecked = Template.bind({});
Unchecked.args = {
  checked: false,
};

export const Disabled = Template.bind({});
Disabled.args = {
  disabled: true,
};