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

import type { JSXElement } from "@coreai-ds/react-components";
import { makeStyles } 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 = makeStyles({
    container: {
        columnGap: '10px',
        display: 'flex',
        flexWrap: 'wrap',
    },
});

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

export default Disabled;