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

export const AlertInfo = () => {
  return (
    <>
      <HeaderText>Usage</HeaderText>
      <BodyText>
        Used to show pressing and high-signal messages (such as system alerts).
        Intended to be noticed and prompt users to take action.
      </BodyText>
      <br />
      <HeaderText>Rules</HeaderText>
      <BodyText>✔️ Alerts should always include icon.</BodyText>
      <BodyText>
        ❌  Show opened state in mobile, show multi-request panel instead.
      </BodyText>
      <br />
      <HeaderText>Props</HeaderText>
      <BodyText>
        <b>
          <u>alertBody:</u>
        </b>{" "}
        An optional <i>React component</i> that renders between the icon and the
        CTA - copy min: 20 characters and max: 130 characters
      </BodyText>
      <br />
      <BodyText>
        <b>
          <u>actionButtonProps:</u>
        </b>{" "}
        An optional <i>object</i> containing the necessary props for Button
        relevant to the CTA - if left blank, a button will not appear on the
        alert
      </BodyText>
      <br />
      <BodyText>
        <b>
          <u>alertStatus:</u>
        </b>{" "}
        An optional <i>string</i> that controls the background color of the
        alert and the color of the alert's icon - options: "warning" or "error"
        - if left blank, the default whiteBackground and icon is used
      </BodyText>
      <BodyText>
        <b>
          <u>avatar:</u>
        </b>{" "}
        An optional <i>string</i> reference to an image to be rendered in place of the icon
      </BodyText>
    </>
  );
};
