// 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 { Avatar } from "@coreai-ds/react-components";
import { CalendarMonthRegular } from "@fluentui/react-icons";
import * as React from 'react';

const useContainerStyles = makeStyles({
    innerWrapper: {
        alignItems: 'start',
        columnGap: '10px',
        display: 'flex',
        flexWrap: 'wrap',
    },
    outerWrapper: {
        display: 'flex',
        flexDirection: 'column',
        rowGap: '10px',
    },
});

export const Shape = (): JSXElement => {
    const containerStyles = useContainerStyles();
    return (<div className={containerStyles.outerWrapper}>
      <div className={containerStyles.innerWrapper}>
        <Tag media={<Avatar name="Katri Athokas" badge={{ status: 'busy' }}/>}>Rounded</Tag>
        <Tag shape="circular" media={<Avatar name="Katri Athokas" badge={{ status: 'busy' }}/>}>
          Circular
        </Tag>
      </div>

      <div className={containerStyles.innerWrapper}>
        <Tag dismissible dismissIcon={{ 'aria-label': 'remove' }} icon={<CalendarMonthRegular />} secondaryText="Secondary text">
          Rounded
        </Tag>
        <Tag shape="circular" dismissible dismissIcon={{ 'aria-label': 'remove' }} icon={<CalendarMonthRegular />} secondaryText="Secondary text">
          Circular
        </Tag>
      </div>
    </div>);
};

export default Shape;