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

import { Checkbox } from "../ui-components/Checkbox";
import { CheckboxInfo } from "../ui-components/Checkbox/CheckboxInfo";

export default {
  title: "Form Fields/Checkbox",
  component: Checkbox,
} as ComponentMeta<typeof Checkbox>;

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

const InfoTemplate: ComponentStory<typeof Checkbox> = () => {
  return (
    <>
      <CheckboxInfo />
      <Checkbox defaultChecked={false} name={"Default to off"} />
      <Checkbox checked={true} name={"Selected option"} />
      <Checkbox disabled={true} name={"Disabled option"} />
    </>
  );
};

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

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