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

import { TagGroup } from "@coreai-ds/react-components";
import { Tag } from "@coreai-ds/react-components";
import { InteractionTag } from "@coreai-ds/react-components";
import { InteractionTagPrimary } from "@coreai-ds/react-components";

export const Default = () => {
    const styles = /* css */ `
      .tag-group-default-example {
        display: flex;
        flex-direction: column;
        row-gap: 10px;
      }
    `;
    return (<>
        <style>{styles}</style>
        <div className="tag-group-default-example">
          Example with Tag:
          <TagGroup aria-label="Simple tag group with Tag" role="list">
            <Tag role="listitem">Tag 1</Tag>
            <Tag role="listitem">Tag 2</Tag>
            <Tag role="listitem">Tag 3</Tag>
          </TagGroup>
          Example with InteractionTag:
          <TagGroup aria-label="Simple tag group with InteractionTag">
            <InteractionTag>
              <InteractionTagPrimary>Tag 1</InteractionTagPrimary>
            </InteractionTag>
            <InteractionTag>
              <InteractionTagPrimary>Tag 2</InteractionTagPrimary>
            </InteractionTag>
            <InteractionTag>
              <InteractionTagPrimary>Tag 3</InteractionTagPrimary>
            </InteractionTag>
          </TagGroup>
        </div>
      </>);
};

export default Default;