/**
 * TEAM: frontend_infra
 * @flow
 */

import * as React from "react";
import Button from "../../button/Button";
import useToaster from "../useToaster";

/**
 * @title Basic Toast Usage
 * @description The toast message should be concise and direct. Toasts consist of a single line of text with a style that reflects the intent of the notification.
 */
export default function ToastBasicUsage(): React.Node {
  // If useToaster is not available since you're using a class component, use <ToasterContext.Consumer>...</ToasterContext.Consumer> instead
  const {showToast} = useToaster();
  return (
    <Button
      onClick={() => {
        showToast({
          intent: "success",
          message: "Something happened and you should know 👍",
          action: {
            type: "refresh",
            onClick: () => {},
          },
        });
      }}
    >
      Launch Toast
    </Button>
  );
}