// 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 { InteractionTag } from "@coreai-ds/react-components";
import { InteractionTagPrimary } from "@coreai-ds/react-components";
import { Avatar } from "@coreai-ds/react-components";
import { CalendarMonthRegular } from "@fluentui/react-icons";
import { InteractionTagSecondary } from "@coreai-ds/react-components";
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}>
        <InteractionTag>
          <InteractionTagPrimary media={<Avatar name="Katri Athokas" badge={{ status: 'busy' }}/>}>
            Rounded
          </InteractionTagPrimary>
        </InteractionTag>
        <InteractionTag shape="circular">
          <InteractionTagPrimary media={<Avatar name="Katri Athokas" badge={{ status: 'busy' }}/>}>
            Circular
          </InteractionTagPrimary>
        </InteractionTag>
      </div>

      <div className={containerStyles.innerWrapper}>
        <InteractionTag>
          <InteractionTagPrimary icon={<CalendarMonthRegular />} secondaryText="Secondary text" hasSecondaryAction>
            Rounded
          </InteractionTagPrimary>
          <InteractionTagSecondary aria-label="remove"/>
        </InteractionTag>
        <InteractionTag shape="circular">
          <InteractionTagPrimary icon={<CalendarMonthRegular />} secondaryText="Secondary text" hasSecondaryAction>
            Circular
          </InteractionTagPrimary>
          <InteractionTagSecondary aria-label="remove"/>
        </InteractionTag>
      </div>
    </div>);
};

export default Shape;