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

import type { TooltipProps } from "@coreai-ds/react-components";
import type { JSXElement } from "@coreai-ds/react-components";
import { makeStyles } from "@coreai-ds/react-components";
import { tokens } from "@coreai-ds/react-components";
import { Tooltip } from "@coreai-ds/react-components";
import { Button } from "@coreai-ds/react-components";
import { SlideTextRegular } from "@fluentui/react-icons";
import * as React from 'react';

const useStyles = makeStyles({
    tooltip: {
        backgroundColor: tokens.colorBrandBackground,
        color: tokens.colorNeutralForegroundInverted,
    },
});

export const Styled = (props: Partial<TooltipProps>): JSXElement => {
    const styles = useStyles();
    return (<Tooltip withArrow content={{ children: 'Example tooltip', className: styles.tooltip }} relationship="label" {...props}>
      <Button icon={<SlideTextRegular />} size="large"/>
    </Tooltip>);
};

export default Styled;