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

export const ModalInfo = () => {
  return (
    <>
      <HeaderText>Usage</HeaderText>
      <BodyText>
        Displays in front of all other page content and elements. Used in
        instances that require the user’s full attention and immediate action.
      </BodyText>
      <br />
      <HeaderText>Rules</HeaderText>
      <BodyText>
        ✔️ <b>Use sparingly</b> Modals should only be used in instances that
        require the user's full attention and immediate action (such as entering
        banking info or signing the IC agreement).
      </BodyText>
      <BodyText>
        ✔️  Prioritize using Action Sheet or Panel over modal and in instances
        where user should still be allowed to continue with their current task.
      </BodyText>
      <BodyText>
        ✔️  Deactivate all background elements when modal is in use
      </BodyText>
      <BodyText>
        ❌ Don't use more than one modal on a page or at a time (no modal should
        display on top of another modal)
      </BodyText>
      <BodyText>
        ✔️  Marketing modals are to be used to celebrate an achievement or
        promote actions taken by the user. Action modals are to be used at
        confirm and focus the user to take a specify action.
      </BodyText>
      <BodyText>
        ✔️  Should always display over an overlay of Grey/Base at 25%
      </BodyText>
      <br />
      <HeaderText>Props</HeaderText>
      <BodyText>
        <b>
          <u>size:</u>
        </b>{" "}
        An optional <i>string</i> that determines the width of the modal,
        corresponds to 3 pre-set widths
      </BodyText>
      <BodyText>- Possible values: "s", "m", "l"</BodyText>
      <BodyText>- If left blank, will default to "m" width (500px)</BodyText>
      <br />
      <BodyText>
        <b>
          <u>modalTitle:</u>
        </b>{" "}
        An optional <i>string</i> that serves as the title of the modal
        component
      </BodyText>
      <br />
      <BodyText>
        <b>
          <u>modalBody:</u>
        </b>{" "}
        An optional <i>react component</i> that renders between the modal's
        title and CTAs
      </BodyText>
      <br />
      <BodyText>
        <b>
          <u>showModal:</u>
        </b>{" "}
        An optional <i>boolean</i> indicating whether or not the modal should
        display
      </BodyText>
      <BodyText>- If left blank will default to false</BodyText>
      <br />
      <BodyText>
        <b>
          <u>onCloseModal:</u>
        </b>{" "}
        An optional <i>function</i> runs upon the user clicking the close icon
      </BodyText>
      <br />
      <BodyText>
        <b>
          <u>noClose:</u>
        </b>{" "}
        An optional <i>boolean</i>; if true, there will be no close icon on the
        modal
      </BodyText>
      <br />
      <BodyText>
        <b>
          <u>primaryButtonProps:</u>
        </b>{" "}
        An optional <i>object</i> containing the necessary props for RooButton relevant to the primary CTA
        - if left blank, a primary CTA button will not appear on the modal
      </BodyText>
      <br />
      <BodyText>
        <b>
          <u>secondaryButtonProps:</u>
        </b>{" "}
        An optional <i>object</i> containing the necessary props for RooButton relevant to the secondary CTA
        - if left blank, a secondary CTA button will not appear on the modal
      </BodyText>
      <br />
      <HeaderText>Placement</HeaderText>
      <BodyText>
        - Modals should open 12px to the right of the icon or other UI element
        it's triggered by{" "}
      </BodyText>
      <BodyText>
        - For modals with photo upload type, should always open in the center of
        the page
      </BodyText>
      <BodyText>
        - In mobile, modal is full screen and CTAs go full width with primary CTA
        stacked on top and CTAs sticky to the bottom of the screen
      </BodyText>
    </>
  );
};
