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

export const RooInfoPanelInfo = () => {
  return (
    <>
      <HeaderText>Usage</HeaderText>
      <BodyText>
        To be used when providing users with additional information on an aspect
        of the platform, such as allowing them to view tax due dates, or read
        the platform's fine print. The panels are only for informational
        purposes, thus should only be used when conveying info to users, and
        should not be used if any action is required on the user's part.
      </BodyText>
      <br />
      <HeaderText>Rules</HeaderText>
      <BodyText>- Title (required)</BodyText>
      <BodyText>- Close icon (X) (required)</BodyText>
      <BodyText>- Subtitle (optional)</BodyText>
      <BodyText>- Content (required)</BodyText>
      <br />
      <HeaderText>Props</HeaderText>
      <BodyText>
        <b>
          <u>isShowPanel:</u>
        </b>
        An optional <i>boolean</i> that indicates whether or not to show the
        panel
      </BodyText>
      <br />
      <BodyText>
        <b>
          <u>title:</u>
        </b>
        An optional <i>string</i> that serves as the title for the panel
      </BodyText>
      <br />
      <BodyText>
        <b>
          <u>panelBody:</u>
        </b>
        An optional <i>React element</i> that serves as the body of the panel
      </BodyText>
      <br />
      <BodyText>
        <b>
          <u>onClosePanel:</u>
        </b>
        An optional <i>function</i> runs when the panel is closed via the "x" on
        the panel and when outside of the panel is clicked
      </BodyText>
      <br />
      <HeaderText>Specs</HeaderText>
      <BodyText>
        <b>Width</b>
      </BodyText>
      <BodyText>Desktop: fixed to 460px</BodyText>
      <BodyText>Tablet: fixed to 385px</BodyText>
      <BodyText>Mobile: fixed to full width of viewport</BodyText>
      <BodyText>
        <b>Height</b>
      </BodyText>
      <BodyText>- Dynamic based on height of page</BodyText>
      <BodyText>- Should display from below nav until bottom of page</BodyText>
      <BodyText>
        *If the amount of information within side panel exceeds the viewport's
        height, allow scrolling within the side panel so users can see all of
        the info.
      </BodyText>
      <br />
      <HeaderText>Interaction</HeaderText>
      <BodyText>
        - Side panel should always slide into page from the right side of the
        viewport, and stay present until user clicks outside of the panel or
        uses the close (X) icon to close it.
      </BodyText>
      <BodyText>
        - On mobile, side panel should slide into the page from the right, but
        take up the full width of the page when opened. No background
        information should be visible to the user when the panel is opened. Side
        panel should stay opened until user interacts with it to close.
      </BodyText>
    </>
  );
};
