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

import type { ToolbarProps } from "@coreai-ds/react-components";
import type { JSXElement } from "@coreai-ds/react-components";
import { makeStyles } from "@coreai-ds/react-components";
import { Toolbar } from "@coreai-ds/react-components";
import { ToolbarGroup } from "@coreai-ds/react-components";
import { ToolbarButton } from "@coreai-ds/react-components";
import { FontIncreaseRegular } from "@fluentui/react-icons";
import { FontDecreaseRegular } from "@fluentui/react-icons";
import { TextFontRegular } from "@fluentui/react-icons";
import { ToolbarDivider } from "@coreai-ds/react-components";
import * as React from 'react';

const useStyles = makeStyles({
    toolbar: {
        justifyContent: 'space-between',
    },
});

export const FarGroup = (props: Partial<ToolbarProps>): JSXElement => {
    const farGroupStyles = useStyles();
    return (<Toolbar aria-label="with Separeted Groups" {...props} className={farGroupStyles.toolbar}>
      <ToolbarGroup role="presentation">
        <ToolbarButton aria-label="Increase Font Size" appearance="primary" icon={<FontIncreaseRegular />}/>
        <ToolbarButton aria-label="Decrease Font Size" icon={<FontDecreaseRegular />}/>
        <ToolbarButton aria-label="Reset Font Size" icon={<TextFontRegular />}/>
        <ToolbarDivider />
        <ToolbarButton aria-label="Increase Font Size" appearance="primary" icon={<FontIncreaseRegular />}/>
        <ToolbarButton aria-label="Decrease Font Size" icon={<FontDecreaseRegular />}/>
        <ToolbarButton aria-label="Reset Font Size" icon={<TextFontRegular />}/>
      </ToolbarGroup>
      <ToolbarGroup role="presentation">
        <ToolbarButton aria-label="Increase Font Size" appearance="primary" icon={<FontIncreaseRegular />}/>
        <ToolbarButton aria-label="Decrease Font Size" icon={<FontDecreaseRegular />}/>
        <ToolbarButton aria-label="Reset Font Size" icon={<TextFontRegular />}/>
      </ToolbarGroup>
    </Toolbar>);
};

export default FarGroup;