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

import type { JSXElement } from "@coreai-ds/react-components";
import { makeResetStyles } from "@coreai-ds/react-components";
import { Tag } from "@coreai-ds/react-components";
import { CalendarMonthRegular } from "@fluentui/react-icons";
import * as React from 'react';

const useContainerStyles = makeResetStyles({
    columnGap: '10px',
    display: 'flex',
});

export const Selected = (): JSXElement => {
    const containerStyles = useContainerStyles();
    return (<div className={containerStyles}>
      <Tag selected secondaryText="appearance=filled" icon={<CalendarMonthRegular />} dismissible dismissIcon={{ 'aria-label': 'remove' }}>
        Selected
      </Tag>
      <Tag selected secondaryText="appearance=outline" appearance="outline" icon={<CalendarMonthRegular />} dismissible dismissIcon={{ 'aria-label': 'remove' }}>
        Selected
      </Tag>
      <Tag selected secondaryText="appearance=brand" appearance="brand" icon={<CalendarMonthRegular />} dismissible dismissIcon={{ 'aria-label': 'remove' }}>
        Selected
      </Tag>
    </div>);
};

export default Selected;