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

export const CheckboxInfo = () => {
  return (
    <>
      <HeaderText>Usage</HeaderText>
      <BodyText>
        To indicate multi-select options for an item, where the user is able to
        select multiple options at once.
      </BodyText>
      <br />
      <HeaderText>Rules</HeaderText>
      <BodyText>Should be used when more than 1 option and less than 8 options are available for the user to select.</BodyText>
      <BodyText>Must be used with a form label to display checkbox categories and each checkbox should display with a direct, descriptive label as well.</BodyText>
      <BodyText>Labels should be clear and direct, but not sentence form. Max of 25 characters per checkbox label.</BodyText>
      <BodyText>Should not be used when a singular option is available. Use Radio Button instead.</BodyText>
      <BodyText>Should not be used to turn on/off options. Use toggle instead.</BodyText>
      <br />
      <HeaderText>Props</HeaderText>
      <BodyText>
        <b>
          <u>checked:</u>
        </b>{" "}
        An optional <i>boolean</i> that specifies whether the checkbox is selected
      </BodyText>
      <br />
      <BodyText>
        <b>
          <u>defaultChecked:</u>
        </b>{" "}
        An optional <i>boolean</i> that specifies the initial state: whether or not the checkbox is selected
      </BodyText>
      <br />
      <BodyText>
        <b>
          <u>disabled:</u>
        </b>{" "}
        An optional <i>boolean</i> that specifies whether the checkbox is disabled
      </BodyText>
      <br />
      <BodyText>
        <b>
          <u>onChange:</u>
        </b>{" "}
        An optional <i>callback function</i> that is triggered when the state changes
      </BodyText>
      <br />
      <BodyText>
        <b>
          <u>name:</u>
        </b>{" "}
        An optional <i>string</i> that serves as the label for the checkbox
      </BodyText>
      <br />
      <BodyText>
        <b>
          <u>value:</u>
        </b>{" "}
        An optional <i>string</i> that serves as value for comparison, to determine if checked
      </BodyText>
      <br />
    </>
  );
};
