import React from "react";
import { HeaderText, BodyText } from "../InfoStyles";

export const ToggleInfo = () => {
  return (
    <>
      <HeaderText>Usage</HeaderText>
      <BodyText>
        Allow users to switch an item on or off, or immediately activate or
        deactivate something. Generally used to change states of system
        functionalities <i>(eg. changing systems settings or preferences).</i>
      </BodyText>
      <br />
      <HeaderText>Rules</HeaderText>
      <BodyText>
        As toggles come with pre-selected default states (either ON or OFF), do
        not use for instances that require users to make a choice{" "}
        <i>(eg. indicate "yes" or "no"</i>
      </BodyText>
      <BodyText>
        Include clear labels that describe what the control will do when it is
        ON.
      </BodyText>
      <BodyText>Keep labels as succinct and descriptive as possible.</BodyText>
      <BodyText>Place labels to the left of toggle.</BodyText>
      <br />
      <HeaderText>Props</HeaderText>
      <BodyText>
        <b>
          <u>checked:</u>
        </b>{" "}
        An optional <i>boolean</i> that specifies whether the toggle is selected
      </BodyText>
      <br />
      <BodyText>
        <b>
          <u>defaultChecked:</u>
        </b>{" "}
        A required <i>boolean</i> that specifies the beginning state of the toggle
      </BodyText>
      <br />
      <BodyText>
        <b>
          <u>disabled:</u>
        </b>{" "}
        An optional <i>boolean</i> that specifies whether the toggle is disabled
      </BodyText>
      <br />
      <BodyText>
        <b>
          <u>onChange:</u>
        </b>{" "}
        An optional <i>callback function</i> that runs when the toggle selection is changed
      </BodyText>
      <br />
      <BodyText>
        <b>
          <u>name:</u>
        </b>{" "}
        An required <i>string</i> that serves as the label for the toggle
      </BodyText>
      <br />
    </>
  );
};
