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

export const RadioInfo = () => {
  return (
    <>
      <HeaderText>Usage</HeaderText>
      <BodyText>
        Used to expose all available options in a list, from which users are able to select one single option.
      </BodyText>
      <br />
      <HeaderText>Rules</HeaderText>
      <BodyText>Do not use when users are required to make multiple selections. If multiple selections are needed, use Checkbox instead.</BodyText>
      <BodyText>Should be used when more than 1 option and less than 8 options are available for the user to select.</BodyText>
      <br />
      <HeaderText>Props</HeaderText>
      <BodyText>
        <b>
          <u>checked:</u>
        </b>{" "}
        An optional <i>boolean</i> that specifies whether the radio button is selected
      </BodyText>
      <br />
      <BodyText>
        <b>
          <u>defaultChecked:</u>
        </b>{" "}
        An optional <i>boolean</i> that specifies the initial state: whether or not the radio button is selected
      </BodyText>
      <br />
      <BodyText>
        <b>
          <u>disabled:</u>
        </b>{" "}
        An optional <i>boolean</i> that specifies whether the radio button 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 radio button
      </BodyText>
      <br />
      <BodyText>
        <b>
          <u>value:</u>
        </b>{" "}
        An optional <i>string</i> that serves as value for comparison, to determine if selected
      </BodyText>
      <br />
    </>
  );
};