// Copyright (c) Microsoft Corporation.
// Licensed under the MIT license.

import type { MessageBarIntent } from "@coreai-ds/react-components";
import { MessageBar } from "@coreai-ds/react-components";
import { MessageBarBody } from "@coreai-ds/react-components";
import { MessageBarTitle } from "@coreai-ds/react-components";
import { Link } from "@coreai-ds/react-components";

export const Intent = () => {
    // CoreAI adds `"brand"` on top of Fluent's four preset intents.
    const intents: MessageBarIntent[] = ['info', 'warning', 'error', 'success', 'brand'];
    const styles = /* css */ `
      .message-bar-intent-example {
        display: flex;
        flex-direction: column;
        gap: 10px;
      }
    `;
    return (<>
        <style>{styles}</style>
        <div className="message-bar-intent-example">
          {intents.map((intent) => (<MessageBar key={intent} intent={intent}>
              <MessageBarBody>
                <MessageBarTitle>Intent {intent}</MessageBarTitle>
                Message providing information to the user with actionable insights.{' '}
                <Link>Link</Link>
              </MessageBarBody>
            </MessageBar>))}
        </div>
      </>);
};

export default Intent;