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

export const ProgressBarInfo = () => {
  return (
    <>
      <HeaderText>Usage</HeaderText>
      <BodyText></BodyText>
      <br />
      <HeaderText>Rules</HeaderText>
      <BodyText></BodyText>
      <br />
      <HeaderText>Props</HeaderText>
      <BodyText>
        <b>
          <u>percent:</u>
        </b>{" "}
        An optional <i>number</i> indicating how much of the progress bar should be filled (should
        be a whole number out of 100, not a percentage)
      </BodyText>
      <br />
      <HeaderText>Other</HeaderText>
      <BodyText>
        - Note the white container around the progress bar in the following examples, is only for
        display purposes on storybook and will not be imported with the progress bar component
      </BodyText>
    </>
  );
};
