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

import * as React from "react";

import Status from "../../Status";
import Group from "../../Group";

/**
 * @title Varieties of Status component
 */
export default function StatusVarieties(): React.Node {
  return (
    <Group flexDirection="column">
      <Group>
        <Group flexDirection="column">
          <Status intent="pending" />
          <Status intent="active" />
          <Status intent="error" />
          <Status intent="done" />
          <Status intent="complete" />
          <Status intent="due-soon" />
        </Group>
        <Group flexDirection="column">
          <Status intent="pending" kind="bare" />
          <Status kind="bare" intent="active" />
          <Status kind="bare" intent="error" />
          <Status kind="bare" intent="done" />
          <Status kind="bare" intent="complete" />
          <Status kind="bare" intent="due-soon" />
        </Group>
      </Group>
      <Status intent="active">Custom Text Example</Status>
    </Group>
  );
}