/**
 * TEAM: frontend_infra
 * @flow
 */
import * as React from "react";
import Group from "../../Group";
import Banner from "../../Banner";

/**
 * @title Basic usage
 * @description Banners can use different intents for different use cases.
 */
export default function BannerBasicUsage(): React.Node {
  return (
    <Group flexDirection="column" gap={40}>
      <Group flexDirection="column">
        Intent "Default"
        <Banner
          iconName="attention"
          message="You cannot edit an automatic On Duty Log. You’ll need to create a new log."
          onClose={() => {}}
        />
      </Group>
      <Group flexDirection="column">
        Intent "warning":
        <Banner
          message="You cannot edit an automatic On Duty Log. You’ll need to create a new log."
          iconName="attention"
          intent="warning"
          onClose={() => {}}
        />
      </Group>
      <Group flexDirection="column">
        Intent "error-hollow":
        <Banner
          iconName="attention"
          message="You cannot edit an automatic On Duty Log. You’ll need to create a new log."
          intent="error-hollow"
          onClose={() => {}}
        />
      </Group>
      <Group flexDirection="column">
        Intent "error":
        <Banner
          iconName="attention"
          message="You cannot edit an automatic On Duty Log. You’ll need to create a new log."
          intent="error"
          onClose={() => {}}
        />
      </Group>
    </Group>
  );
}