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

import Checkbox from "./Checkbox";

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

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

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

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

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