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

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

export const Target = (): JSXElement => {
    const [iconRef, setIconRef] = React.useState<HTMLSpanElement | null>(null);
    return (<Tooltip positioning={{ target: iconRef }} withArrow content="This tooltip points to the icon" relationship="description">
      <Button icon={{ ref: setIconRef, children: <ArrowRoutingRegular /> }}>Button with icon</Button>
    </Tooltip>);
};

export default Target;