import React, { useState } from "react";
import { Checkbox } from "../../";

const InteractionsStory = () => {
  const [checked, setChecked] = useState(false);

  return (
    <Checkbox
      name="inputCheckboxInteractive"
      label="My label interactive"
      onChange={setChecked}
      checked={checked}
    />
  );
};

export default (
  <div>
    <div className="m-5">
      <Checkbox
        className="my-class-name"
        name="inputCheckbox"
        label="My label"
        onChange={() => {}}
      />
    </div>
    <div className="m-5">
      <Checkbox
        className="my-class-name"
        checked
        name="inputNameChecked"
        label="My label for checked"
        onChange={() => {}}
      />
    </div>
    <div className="m-5">
      <Checkbox
        className="my-class-name"
        name="inputName2"
        label="My label"
        onChange={() => {}}
        error="Your input is not valid!"
      />
    </div>
    <div className="m-5">
      <Checkbox
        className="my-class-name"
        name="inputName3"
        label="My label for readOnly input"
        onChange={() => {}}
        readOnly
      />
    </div>
    <div className="m-5">
      <Checkbox
        className="my-class-name"
        name="inputName4"
        label="My label for disabled input"
        onChange={() => {}}
        disabled
      />
    </div>
    <div className="m-5">
      <Checkbox
        className="my-class-name"
        name="inputName5"
        label="My label for input with help"
        onChange={() => {}}
        help="Your password must be 8-20 characters long."
      />
    </div>
    <div className="m-5">
      <Checkbox
        className="my-class-name"
        name="inputName4"
        label="My label for required input"
        onChange={() => {}}
        required
      />
    </div>
    <div className="m-5">
      <InteractionsStory />
    </div>
  </div>
);