import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
/*!
 * Copyright (c) Microsoft. All rights reserved.
 * Licensed under the MIT license. See LICENSE file in the project.
 */ import { IconButton } from '@fluentui/react';
import { useBoolean, useId } from '@fluentui/react-hooks';
import { memo } from 'react';
import { Guidance } from './Guidance.js';
import { Callout, Container, icons } from './Tooltip.styles.js';
export const Tooltip = /*#__PURE__*/ memo(function Tooltip({ name ='' , index ,  }) {
    const [isCalloutVisible, { toggle: toggleIsCalloutVisible  }] = useBoolean(false);
    const buttonId = useId('callout-button');
    const labelId = useId('callout-label');
    const descriptionId = useId('callout-description');
    return /*#__PURE__*/ _jsxs(Container, {
        children: [
            /*#__PURE__*/ _jsx(IconButton, {
                id: buttonId,
                iconProps: icons.info,
                "aria-label": "Info Emoji",
                onClick: toggleIsCalloutVisible
            }),
            isCalloutVisible && /*#__PURE__*/ _jsx(Callout, {
                ariaLabelledBy: labelId,
                ariaDescribedBy: descriptionId,
                gapSpace: 0,
                target: `#${buttonId}`,
                onDismiss: toggleIsCalloutVisible,
                setInitialFocus: true,
                calloutMaxHeight: 450,
                children: /*#__PURE__*/ _jsx(Guidance, {
                    name: name,
                    index: index
                })
            })
        ]
    });
});
